/*
 +-------------------------------------------------------------------------+
 | Copyright (C) 2004-2026 The Cacti Group                                 |
 |                                                                         |
 | This program is free software; you can redistribute it and/or           |
 | modify it under the terms of the GNU General Public License             |
 | as published by the Free Software Foundation; either version 2          |
 | of the License, or (at your option) any later version.                  |
 +-------------------------------------------------------------------------+
*/

/*
 * Common, theme-agnostic drilldown behaviour: the action icons are hidden
 * behind a hamburger glyph overlaid on the top-right of the graph.  Clicking
 * the glyph opens the icon strip; it closes on a second click, on leaving the
 * graph, or on an outside click (see initGraphDrilldown() in layout.js).
 * Loaded after each theme's main.css so these rules win.
 */

.graphWrapperOuter > div {
	position: relative;
}

.graphDrillTable {
	position: relative;
}

.graphDrillDownToggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	z-index: 6;
}

/* While a strip is open, lift its graph above neighbours so the icons that
   overflow a short (thumbnail) graph stay on top and clickable, and hovering them
   does not fall through to the graph beneath. */
.graphWrapperOuter.graphDrillActive {
	position: relative;
	z-index: 10;
}

.graphDrillDownToggle .graphDrillDownMenu {
	display: inline-block;
	opacity: 0;
	cursor: pointer;
	margin: 3px;
	padding: 2px 6px;
	border-radius: 3px;
	line-height: 1;
	font-size: 13px;
	color: var(--cacti-dd-fg, #ffffff);
	background: var(--cacti-dd-menu-bg, rgba(0, 0, 0, 0.55));
	box-shadow: 0 0 0 1px var(--cacti-dd-border, transparent);
	transition: opacity 0.12s ease-in-out;
}

/* Keep the toggle focusable (never display:none) and reveal it on hover,
   keyboard focus, the open state, and on devices that cannot hover.  Use
   :focus-visible so a mouse click does not latch the reveal via :focus -
   that is what previously forced a focus-destroying blur() on pointer exit. */
.graphDrillDownToggle.reveal .graphDrillDownMenu,
.graphDrillDownToggle .graphDrillDownMenu:focus-visible,
.graphDrillDownToggle.open .graphDrillDownMenu {
	opacity: 1;
}

@media (hover: none) {
	.graphDrillDownToggle .graphDrillDownMenu {
		opacity: 1;
	}
}

.graphDrillDownToggle.open .graphDrillDownMenu {
	background: var(--cacti-dd-menu-bg-open, rgba(0, 0, 0, 0.82));
}

.graphDrillDownToggle .iconWrapper {
	display: none;
}

.graphDrillDownToggle.open .iconWrapper {
	display: table;
	border-collapse: collapse;
	margin: 0 3px 3px 3px;
	padding: 4px;
	border-radius: 4px;
	background: var(--cacti-dd-panel-bg, rgba(0, 0, 0, 0.85));
	box-shadow: 0 0 0 1px var(--cacti-dd-border, transparent), 0 3px 10px rgba(0, 0, 0, 0.4);
	color: var(--cacti-dd-fg, #ffffff);
}

.graphDrillDownToggle.open .iconWrapper .iconLink {
	display: table-row;
	color: var(--cacti-dd-fg, #ffffff);
	text-decoration: none;
	cursor: pointer;
}

/* Theme-appropriate row highlight: a wash of the theme's drilldown accent (the
   hamburger/panel hue), falling back to the current text colour. */
.graphDrillDownToggle.open .iconWrapper .iconLink:hover,
.graphDrillDownToggle.open .iconWrapper .iconLink:focus-visible {
	background: color-mix(in srgb, var(--cacti-dd-accent, currentColor) 22%, transparent);
	outline: none;
}

/* Label on the left; the vertical cell padding keeps a few pixels between rows. */
.graphDrillDownToggle.open .iconWrapper .iconLabel {
	display: table-cell;
	padding: 2px 8px;
	font-size: 12px;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

/* Glyphs stacked above one another in a fixed-width column, centred so each
   icon sits in the middle of its cell; targets any glyph <i> so plugin icons
   without the drillDown class align too. */
.graphDrillDownToggle.open .iconWrapper .iconLink > i {
	display: table-cell;
	width: 16px;
	padding: 2px 8px 2px 2px;
	text-align: center;
	vertical-align: middle;
}