/* ---------------------------------------------------------------------------
 * Compact TOC visual refresh (T1: tree icons, chevrons, inline metadata)
 *
 * Scoped to the layer tree (#toc) and the shared metadata icon so the Active
 * Layers work unit can reuse the same asset/class without inheriting layout
 * changes. Approved metrics: 330px panel, Roboto 12px, 20px RobotoBold #00677F
 * root rows (S13), 18px regular rows (S20), 16px icons and chevrons (S11) and one
 * left column per depth for checkboxes and chevrons (S12).
 * ------------------------------------------------------------------------- */

/* Group rows are flex containers so the chevron and the optional group checkbox
 * stay on the row's centreline, even when the label wraps into two lines. Every
 * regular row is 18px tall (S20); only root themes keep their 20px minimum. */
#toc .nodosTOC {
	display: flex;
	align-items: center;
	min-height: 18px;
	line-height: 14px;
	margin-bottom: 0;
}

/* Names own the shrinkable column; anonymous flex text and shrinking widgets
 * allowed long checkbox-group names to paint over their controls. */
#toc .tocTreeTitle {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

#toc .nodosTOC > .dijitCheckBox {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 0 2px 0 0;
}

/* Root theme rows are taller and use the actual RobotoBold family (S13). The
 * minimum height never clips a wrapped label. */
#toc > .nodosTOC {
	min-height: 20px;
	line-height: 16px;
	margin-bottom: 0;
	font-family: RobotoBold, Roboto, "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	color: #00677F;
}

#toc .nodosCapas {
	position: relative;
	min-height: 18px;
	padding-left: 18px;
	margin-bottom: 0;
	/* A 16px line box keeps every single-line leaf row at exactly 18px (min-height),
	 * with the checkbox, the label and the inline Info icon sharing one centreline.
	 * A wrapped name still grows the row instead of being clipped. */
	line-height: 16px;
	/* Whole-row activation (S23): the hand cursor is offered by the row itself, so
	 * the blank area right of the text reads as clickable too. */
	cursor: pointer;
}

#toc .tocChevron {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-right: 0;
	vertical-align: middle;
}

#toc .tocThemeIcon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-right: 4px;
	vertical-align: middle;
}

.tocMetadataIcon {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	vertical-align: middle;
}

/* Leaf rows keep inline flow on purpose: the circular Info icon has to follow the
 * last word of the name instead of becoming a separate column. */
#toc .nodosCapas > .dijitCheckBox,
#toc .nodosCapas > .dijitRadio {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	margin: 0 2px 0 0;
	/* Dojo adds an inline vertical-align:text-top, which floats the box upwards. */
	vertical-align: middle !important;
}

#toc .nodosCapas > label {
	vertical-align: middle;
}

#toc .imgTocMLF {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 3px 0 2px;
	vertical-align: middle;
}

#toc .imgTocMLF2 {
	display: block;
	width: 16px;
	height: 16px;
}

/* Same-depth leaf checkbox and group chevron share one left column: the legacy
 * C-columns were 16/36px while the matching G-columns were 10/20px, which pushed
 * "Centres docents per règim" 16px right of its sibling groups. */
#toc .nodosTOCNivelC1 { margin-left: 10px; }
#toc .nodosTOCNivelC2 { margin-left: 20px; }
#toc .nodosTOCNivelC3 { margin-left: 30px; }
#toc .nodosTOCNivelC4 { margin-left: 40px; }
#toc .nodosTOCNivelC5 { margin-left: 50px; }
#toc .nodosTOCNivelC6 { margin-left: 60px; }
#toc .nodosTOCNivelC7 { margin-left: 70px; }
#toc .nodosTOCNivelC8 { margin-left: 80px; }

/* --- Hover and focus feedback (S16) ---------------------------------------
 * Colour/opacity/shadow only: no padding, size or handler changes, and the
 * legend colours of the Active Layers cards are never touched from here. */

#toc .nodosTOC:hover,
#toc .nodosCapas:hover {
	background-color: rgba(0, 103, 127, 0.08);
}

#toc .nodosTOC:hover > .tocChevron {
	opacity: 0.7;
}

/* Hover is transient and mouse-only; the checked mark itself is never removed.
 * The focus treatment below is keyboard-only (S22): a real mouse click on the
 * checkbox, its label or the blank row area leaves no persistent ring. */
#toc .nodosCapas > .dijitCheckBox:hover,
#toc .nodosCapas > .dijitRadio:hover,
#toc .nodosTOC > .dijitCheckBox:hover {
	box-shadow: 0 0 0 2px rgba(0, 103, 127, 0.25);
	border-radius: 3px;
}

/* Metadata icons get a visible surface on their own 16px hitbox (S24) without
 * changing padding or size, so the row never shifts and the handler is untouched. */
#toc .imgTocMLF:hover {
	background-color: rgba(0, 103, 127, 0.16);
	box-shadow: 0 0 0 1px rgba(0, 103, 127, 0.55);
	border-radius: 50%;
}

#toc .imgTocMLF:hover .tocMetadataIcon {
	filter: brightness(0.75);
}

#toc .imgTocMLF:focus-visible,
#toc .dijitCheckBox:has(> input:focus-visible),
#toc .dijitRadio:has(> input:focus-visible) {
	outline: 2px solid rgba(0, 103, 127, 0.55);
	outline-offset: 1px;
	border-radius: 3px;
}