/* Effectivity trees: the frame /trax/application_standard_window/eff_tree_frame.xhtml (tiles, group
   rail, find/filter bar) and the page's p:treeTable inside it. Everything is scoped under .ec-eff.
   Decision colours (E/C windows, frame param decisions=true, container .ec-eff-decisions):
   Y applicable (blue), I issue to (orange), N not applicable (grey), P pending. Elsewhere the accent
   is the action blue. Behaviour: jsCustom/emro-ec-effectivity-v1.js. */
.ec-eff {
    --ec-ink: var(--emro-color-text, #172737);
    --ec-muted: var(--emro-color-text-muted, #526577);
    --ec-line: var(--emro-color-border, #c7d2dc);
    --ec-ground: var(--emro-color-surface, #ffffff);
    --ec-Y: var(--emro-color-action, #2563eb); --ec-Y-soft: var(--emro-color-action-soft, #eff6ff); --ec-Y-ink: var(--emro-color-action-hover, #1d4ed8);
    --ec-I: var(--emro-color-warning, #855700); --ec-I-soft: var(--emro-color-warning-soft, #fff7df); --ec-I-ink: var(--emro-color-warning, #855700);
    --ec-N: var(--emro-color-border-strong, #8ea2b4); --ec-N-soft: var(--emro-color-surface-muted, #f5f8fa); --ec-N-ink: var(--emro-color-text-muted, #526577);
    --ec-P: var(--emro-color-focus, #f4b942); --ec-P-soft: var(--emro-color-surface, #ffffff); --ec-P-ink: var(--emro-color-warning, #855700);
    --ec-c: var(--ec-Y); --ec-soft: var(--ec-Y-soft); --ec-cink: var(--ec-Y-ink);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 20px;
    background: var(--ec-ground);
    color: var(--ec-ink);
    font-family: var(--emro-font-family, inherit);
}
.ec-eff-decisions .ec-eff-dec-Y { --ec-c: var(--ec-Y); --ec-soft: var(--ec-Y-soft); --ec-cink: var(--ec-Y-ink); }
.ec-eff-decisions .ec-eff-dec-I { --ec-c: var(--ec-I); --ec-soft: var(--ec-I-soft); --ec-cink: var(--ec-I-ink); }
.ec-eff-decisions .ec-eff-dec-N { --ec-c: var(--ec-N); --ec-soft: var(--ec-N-soft); --ec-cink: var(--ec-N-ink); }
.ec-eff-decisions .ec-eff-dec-P { --ec-c: var(--ec-P); --ec-soft: var(--ec-P-soft); --ec-cink: var(--ec-P-ink); }
/* The live panels are p:outputPanels (ui-widget): keep the frame's font, not the widget one. */
.ec-eff .ec-eff-live.ui-outputpanel { font: inherit; }

/* Header */
.ec-eff-head { display: flex; align-items: center; gap: 16px; }
.ec-eff-title { margin: 0; font-size: 22px; font-weight: 600; font-family: var(--emro-font-family, inherit); }
.ec-eff-mode { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ec-Y-soft); color: var(--ec-Y-ink); }

/* Summary tiles */
.ec-eff-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ec-eff:not(.ec-eff-decisions) .ec-eff-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ec-eff-tile { box-shadow: var(--emro-shadow-sm); display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--ec-ground); border: 1px solid var(--ec-line); border-radius: var(--emro-radius-lg, 12px); font-size: 13px; color: var(--ec-muted); }
.ec-eff-tile b { display: inline-block; margin: 0 4px 0 8px; font: 600 22px var(--emro-font-family, inherit); color: var(--ec-ink); vertical-align: -2px; }
.ec-eff-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--ec-c); flex-shrink: 0; }
.ec-eff-tile.is-unsel { --ec-c: var(--ec-N); }

/* Body: group rail + tree */
.ec-eff-body { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.ec-eff-rail { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }

/* A card click scrolls its group row to the top (emro-ec-effectivity-v1.js) and the rail stays beside the tree
   with its own scroll, both below what a full window keeps fixed over the page: the 44px .layout-topbar (89px
   with the tablet clock row, up to 64rem) and the window menubar, which /trax/menu/Menu.xhtml's p:sticky pins at
   top 60px (110px up to 960px; taken up to 64rem here so the taller topbar is cleared too). A legacy window's
   menubar is pulled up calc(-2.25rem - 2px) over its own 2.25rem height by emro-primefaces-theme.css
   (.ui-panel-content > div[id$="_StickyPnl"]), so it ends 2px above that top; a routed window wraps it in
   .emro-full-workbench, where it keeps its own row (.5rem padding, .4rem links: about 3.25rem). 12px gap.
   In a dialog the content box scrolls and nothing covers it. Each .ec-eff-body bounds its own rail. The box
   that sticks and scrolls is the static .ec-eff-rail-box: the ajax-replaced .ec-eff-rail would lose its scroll
   on every tree select. Its 4px padding keeps the cards' focus ring inside the clip. */
.ec-eff { --ec-eff-bar: 60px; --ec-eff-top: calc(var(--ec-eff-bar) - 2px + 12px); }
@media (max-width: 64rem) { .ec-eff { --ec-eff-bar: 110px; } }
.emro-full-workbench .ec-eff { --ec-eff-top: calc(var(--ec-eff-bar) + 3.25rem + 12px); }
.ui-dialog .ec-eff { --ec-eff-top: 8px; }
.ec-eff .ec-eff-tree tr { scroll-margin-top: var(--ec-eff-top); }
.ec-eff-rail-box { flex: 0 0 auto; position: sticky; top: var(--ec-eff-top); max-height: calc(100vh - var(--ec-eff-top) - 16px); overflow-y: auto; padding: 4px; }
.ui-dialog .ec-eff-rail-box { top: 0; max-height: calc(100vh - 200px); }
.ec-eff-rail-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ec-muted); padding: 0 4px; }
.ec-eff-group-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; text-align: left; background: var(--emro-color-surface-raised, #fbfcfd); border: 1px solid var(--ec-line); border-radius: var(--emro-radius-lg, 12px); color: var(--ec-ink); cursor: pointer; font: inherit; }
.ec-eff-group-card:hover, .ec-eff-group-card:focus-visible { background: var(--ec-ground); border-color: var(--ec-Y); }
.ec-eff-group-top, .ec-eff-group-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.ec-eff-group-name { font: 600 16px var(--emro-font-family, inherit); }
.ec-eff-pill { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ec-soft); color: var(--ec-cink); white-space: nowrap; }
.ec-eff-decisions .ec-eff-pill.ec-eff-dec-P { border: 1px dashed var(--ec-I); }
.ec-eff-group-bottom { font-size: 12px; color: var(--ec-muted); white-space: nowrap; }
.ec-eff-group-bottom b { color: var(--ec-ink); font-family: var(--emro-font-family, inherit); }
.ec-eff-group-bottom progress { flex-grow: 1; height: 6px; appearance: none; border: 0; border-radius: 3px; background: var(--emro-color-surface-muted, #f5f8fa); overflow: hidden; }
.ec-eff-group-bottom progress::-webkit-progress-bar { background: var(--emro-color-surface-muted, #f5f8fa); }
.ec-eff-group-bottom progress::-webkit-progress-value { background: var(--ec-c); border-radius: 3px; }
.ec-eff-group-bottom progress::-moz-progress-bar { background: var(--ec-c); border-radius: 3px; }
.ec-eff-decisions .ec-eff-group-bottom.ec-eff-dec-P progress::-webkit-progress-value { background: var(--ec-I); }
.ec-eff-decisions .ec-eff-group-bottom.ec-eff-dec-P progress::-moz-progress-bar { background: var(--ec-I); }

.ec-eff-main { box-shadow: var(--emro-shadow-sm); flex-grow: 1; min-width: 0; background: var(--ec-ground); border: 1px solid var(--ec-line); border-radius: var(--emro-radius-lg, 12px); overflow-x: auto; overflow-y: hidden; }

/* Toolbar: find + show filter (behaviour in emro-ec-effectivity-v1.js) */
.ec-eff-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ec-line); }
.ec-eff-find { width: 260px; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--ec-line); border-radius: var(--emro-radius-md, 8px); font: inherit; font-size: 14px; }
.ec-eff-show { display: flex; gap: 4px; }
.ec-eff-show button { height: 40px; padding: 0 14px; border: 1px solid var(--ec-line); border-radius: var(--emro-radius-md, 8px); background: var(--ec-ground); color: var(--ec-ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.ec-eff-show button[aria-pressed="true"] { background: var(--ec-Y); border-color: var(--ec-Y); color: var(--emro-color-text-inverse, #fff); }
.ec-eff[data-show="sel"] tr.ec-eff-tail:not(.ui-state-highlight),
.ec-eff[data-show="unsel"] tr.ec-eff-tail.ui-state-highlight { display: none; }

/* Tree */
.ec-eff .ec-eff-tree.ui-treetable { border: 0; }
.ec-eff .ec-eff-tree thead th { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ec-muted); background: var(--emro-color-surface-muted, #f5f8fa); }
.ec-eff .ec-eff-tree tbody td { height: 48px; font-size: 14px; color: var(--ec-ink); border-color: var(--ec-line); }
.ec-eff .ec-eff-tree tr.ec-eff-group-row > td { background: var(--emro-color-surface-muted, #f5f8fa); border-top: 2px solid var(--ec-line); }
.ec-eff .ec-eff-tree tr.ec-eff-group-row .ec-eff-group-name { font-size: 15px; }
.ec-eff .ec-eff-tree tr.ec-eff-tail.ui-state-highlight > td { background: var(--ec-ground); color: var(--ec-ink); }
.ec-eff .ec-eff-tree tr.ec-eff-tail:not(.ui-state-highlight) > td { background: var(--ec-ground); color: var(--ec-muted); }
.ec-eff .ec-eff-tree tr:hover > td { background: var(--emro-color-action-soft, #eff6ff); }
.ec-eff .ec-eff-center { text-align: center; }
.ec-eff .ec-eff-mono, .ec-eff .ec-eff-num, .ec-eff-tile b, .ec-eff-group-bottom b { font-variant-numeric: tabular-nums; }
.ec-eff .ec-eff-num { font-family: var(--emro-font-family, inherit); text-align: right; }
.ec-eff .ec-eff-muted { color: var(--ec-muted); }

.ec-eff-tail-no { font: 600 14px var(--emro-font-family, inherit); margin-right: 6px; }
.ec-eff-tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; vertical-align: 1px; }
.ec-eff-tag-sampling { background: var(--ec-Y-soft); color: var(--ec-Y-ink); }
.ec-eff-unsel-tag { background: var(--emro-color-surface-muted, #f5f8fa); color: var(--ec-muted); }
.ec-eff-tree tr.ui-state-highlight .ec-eff-unsel-tag { display: none; }
/* Fallback for a name cell (group name, tail or unit number, tags) that still overflows: it wraps instead of
   clipping. The theme ellipsizes every tree cell (emro-primefaces-theme.css, .ui-treetable tbody td: nowrap +
   ellipsis), and the first cell also draws the toggler (16px + 8 margin), the checkbox (24px + 16 margin) and,
   on leaf rows, a 16px floated indent. The E/C and GSE trees size that column so names and tags fit on one
   line in the 48px row; what does not (an unselected Sampling tail, a name longer than any in ODB today)
   breaks at a space or hyphen, anywhere only as a last resort. The second line starts at the cell's left
   edge and the row grows to about 56px. Four classes beat the theme's three. */
.ec-eff .ec-eff-tree.ui-treetable tbody td:has(.ec-eff-group-name, .ec-eff-tail-no, .ec-eff-tag) { white-space: normal; overflow-wrap: anywhere; }

.ec-eff-status { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.ec-eff-status.is-all { background: var(--emro-color-success-soft, #edf8f2); color: var(--emro-color-success, #1c6b47); }
.ec-eff-status.is-part { background: var(--ec-I-soft); color: var(--ec-I-ink); }
.ec-eff-status.is-none { background: var(--ec-N-soft); color: var(--ec-N-ink); }

/* Decision: the radio group reads as a segmented control */
.ec-eff .ec-eff-decision { display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 4px; background: var(--emro-color-surface-muted, #f5f8fa); border-radius: 10px; vertical-align: middle; }
.ec-eff .ec-eff-decision > * { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 10px; height: 32px; border-radius: var(--emro-radius-md, 8px); white-space: nowrap; }
.ec-eff .ec-eff-decision > *:has(.ui-state-active) { background: var(--ec-ground); box-shadow: 0 1px 3px rgba(22, 24, 29, .15); font-weight: 600; }
.ec-eff .ec-eff-decision label { font-size: 13px; cursor: pointer; margin: 0; }
.ec-eff .ec-eff-decision .ui-radiobutton-box { width: 14px; height: 14px; }
.ec-eff .ec-eff-decision .ui-radiobutton-box.ui-state-active { border-color: currentColor; }
.ec-eff .ec-eff-tools, .ec-eff .ec-eff-actions { display: inline-flex; gap: 6px; margin-left: 12px; vertical-align: middle; }
.ec-eff .ec-eff-tool.ui-button { height: 34px; background: var(--ec-ground); border: 1px solid var(--ec-line); color: var(--ec-ink); font-size: 12px; }
.ec-eff .ec-eff-tool.ui-button:hover { border-color: var(--ec-Y); color: var(--ec-Y); }
.ec-eff .ec-eff-actions { margin-left: 0; }
.ec-eff .ec-eff-action.ui-button { width: 36px; height: 36px; }

/* Checkbox drawn as a switch: put styleClass="ec-eff-switch" on an h:selectBooleanCheckbox (it lands on
   the input). On a p:selectBooleanCheckbox it lands on the wrapper div, so it matches nothing here and
   the PrimeFaces checkbox stays as it is. */
.ec-eff input.ec-eff-switch { appearance: none; width: 40px; height: 24px; margin: 0; border-radius: var(--emro-radius-lg, 12px); background: var(--emro-color-border-strong, #8ea2b4); position: relative; cursor: pointer; transition: background .15s; vertical-align: middle; }
.ec-eff input.ec-eff-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--emro-color-text-inverse, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s; }
.ec-eff input.ec-eff-switch:checked { background: var(--ec-Y); }
.ec-eff input.ec-eff-switch:checked::after { left: 19px; }
.ec-eff input.ec-eff-switch:disabled { opacity: .5; cursor: default; }
.ec-eff input.ec-eff-switch:focus-visible { outline: 2px solid var(--ec-Y); outline-offset: 2px; }