/*CSS for cell : BPMNEditor*/
.base-frame
{ 
    margin: 0; 
}
.toolbar-bpmn 
{ 
    display:flex; 
    gap:8px; padding:8px; 
}
#bpmn-canvas 
{ 
    height: calc(100vh - 49px); 
}
/* Center and size the custom context-pad icon */
.djs-context-pad .entry.magian-icon-investigate {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Use an emoji as the icon glyph */
.djs-context-pad .entry.magian-icon-investigate::before {
  content: "🕵️";            /* or "🔍" if you prefer */
  font-size: 18px;           /* tweak size to taste */
  line-height: 1;
}

.magian-bpmn-overlay
{
    background:#fff;
    border:1px solid #bbb;
    border-radius:8px;
    padding:10px 12px;
    box-shadow:0 6px 24px rgba(0,0,0,.15);
    max-width:280px;
    font-size:13px;
}

.entropy-table-scroller { overflow:auto; position:relative; width:100%; height:100%; }
    .entropy-table { display:inline-table; width:max-content; min-width:100%; border-collapse:collapse; font:13px/1.35 system-ui,sans-serif; }
    .entropy-table th, .entropy-table td { border:1px solid #e2e2e2; padding:8px; vertical-align:top; white-space:normal; }
    .entropy-table th { background:#f8f8f8; position:sticky; top:0; z-index:2; }
    .entropy-table .sticky-col { position:sticky; left:0; z-index:3; background:#fff; box-shadow:2px 0 0 #eee; white-space:nowrap; }
    .entropy-table th.sticky-col { z-index:4; background:#f8f8f8; }

    /* NEW: distribution sliders */
    .entropy-options 
    { 
        display:grid; grid-template-columns: 1fr; gap:12px; align-items:start; 
    }
    .tri-slider-row 
    { 
        display: grid;
        grid-template-columns: var(--opt-label-w, 220px) 1fr 56px;
        align-items: center;
        gap: 12px;                 /* <-- gap between label/slider/badge */
        margin: 6px 0;             /* vertical spacing between rows */
    }
    .tri-slider-row label 
    { 
        justify-self: end;
        padding-right: 8px;
        line-height: 1.2;
        white-space: normal;       /* wrap long option text */
    }
    .tri-slider-row input[type="range"]
    {
         --track-h: 3px;
        --thumb-d: 15px;
        height: calc(var(--thumb-d) + 9px) !important;
        vertical-align: middle;
        -webkit-appearance: none; appearance: none;
        background: transparent; border: none; margin: 0; padding: 0; 
           
        margin: 0;                 /* remove default vertical margin */
        align-self: center;
    }
    .tri-slider-row input[type="range"]::-webkit-slider-runnable-track
    {
        height: var(--track-h) !important;
        background: #ccc;
        border-radius: 0;
        position: static !important; 
        top: 0 !important;    
    }
    .tri-slider-row input[type="range"]::-webkit-slider-thumb
    {
        -webkit-appearance: none; appearance: none;
        height: var(--thumb-d) !important; width: var(--thumb-d) !important;
        border-radius: 50%;
        background: #FEB300; border: 1px solid #feb202ff;
        cursor: pointer; box-shadow: 0 0 2px #feb202ff;
        margin-top: calc((var(--track-h) - var(--thumb-d)) / 2); 
    }
    .tri-slider-row input[type="range"]:focus
    { 
        outline: none; 
    }
    .percent-badge { min-width: 44px; text-align:right; font-variant-numeric: tabular-nums; opacity: .85; }
    .entropy-impact  { color:#555; font-size:12px; }