search.css

/* Scoped query builder surfaces; does not change Cacti or email styles. */
.syslogTemplateEditor {
	padding: 12px;
}

.syslogTemplateEditor .syslogSearchBuilder {
	max-width: 1100px;
	margin: 0;
}

.syslogTemplateEditor .syslogSearchRow {
	border-radius: 3px;
}

.syslogTemplateEditor .ui-selectmenu-button {
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0;
}

.syslogTemplateEditor .syslogSearchGroupRow > .syslogSearchRemove {
	grid-column: 4;
	grid-row: 1;
}

@media (max-width: 700px) {
	.syslogTemplateEditor .syslogSearchText + .ui-selectmenu-button {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

.syslogTemplateEditor .ui-state-error {
	padding: 8px;
}

.syslogTemplateQuery {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	max-width: 60vw;
}

/* Default color tokens for the whole scoped Syslog UI. JS re-samples the live
   Cacti theme onto #syslog_form / #syslog_workspace at runtime (inline styles
   that override these), so the view follows whatever theme is active; these
   values are only the light fallback when scripting has not run yet. */
#syslog_form, #syslog_workspace, .syslogSavedDialog, .syslogSavedPrompt {
	--search-surface: #f3f6f5;
	--search-card: #fff;
	--search-text: #23362f;
	--search-muted: #596d64;
	--search-border: #cbd8d1;
	--search-accent: #276448;
	--search-tint: #e2ede6;
}

#syslog_form .syslogSearchPanel {
	box-sizing: border-box;
	width: min(100%, 1020px, calc(100vw - 28px));
	margin: 8px 4px;
	padding: 10px 14px;
	/* Match host.php: the enclosing .even filter row supplies the surface. */
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	box-shadow: none;
	font-size: 13px;
	line-height: 1.4;
}

#syslog_form .syslogSearchHeader,
#syslog_form .syslogSearchHeading,
#syslog_form .syslogSearchFooter {
	display: flex;
	align-items: center;
	gap: 12px;
}

#syslog_form .syslogSearchHeader {
	justify-content: space-between;
	margin-bottom: 8px;
}

#syslog_form .syslogSearchIcon {
	display: none;
}

#syslog_form #syslog_search_title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--search-text);
}

#syslog_form .syslogSearchMode select,
#syslog_form .syslogSearchMode .ui-selectmenu-button {
	box-sizing: border-box;
	min-width: 126px;
	border: 1px solid var(--search-border);
	border-radius: 7px;
	background: var(--search-card);
	color: var(--search-text);
	font-size: 12px;
}

.syslogSearchBuilder[hidden] {
	display: none;
}

.syslogRuleFilterBuilder {
	box-sizing: border-box;
	max-width: 1100px;
	padding: 12px;
}

.syslogRuleFilterPanel {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	min-width: 0;
	margin: 4px 0;
	border-width: 1px;
	border-style: solid;
}

.syslogRuleFilterPanel[hidden] {
	display: none;
}

.syslogRuleFilterBuilder .syslogSearchActions {
	margin-top: 8px;
	padding-top: 8px;
}

.syslogRuleFilterBuilder .syslogSearchRow {
	border-radius: 3px;
}

.syslogRuleFilterBuilder .ui-selectmenu-button {
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0;
}

#syslog_form .syslogSearchSavedBar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--search-border);
}

#syslog_form .syslogSearchSavedBar label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--search-muted);
}

#syslog_form .syslogSearchSavedBar select {
	box-sizing: border-box;
	min-width: 160px;
	max-width: 240px;
	min-height: 26px;
	margin: 0;
	padding: 2px 6px;
	font: inherit;
	color: var(--search-text);
	border: 1px solid var(--search-border);
	border-radius: 5px;
	background: var(--search-card);
	cursor: pointer;
}

#syslog_form .syslogSearchSavedBar input[type='button'] {
	min-height: 26px;
	padding: 2px 10px;
	border: 1px solid var(--search-border);
	border-radius: 5px;
	background: var(--search-card);
	color: var(--search-text);
	font-size: 12px;
	cursor: pointer;
}

#syslog_form .syslogSearchSavedBar input[type='button']:hover:not(:disabled) {
	background: var(--search-tint);
	border-color: var(--search-accent);
}

#syslog_form .syslogSearchSavedBar input[type='button']:disabled {
	opacity: 0.5;
	cursor: default;
}

/* The saved-search dialog reuses the search panel's surface and tokens. */
.syslogSavedDialog {
	--search-surface: #f3f6f5;
	--search-card: #fff;
	--search-text: #23362f;
	--search-muted: #596d64;
	--search-border: #cbd8d1;
	--search-accent: #276448;
	--search-tint: #e2ede6;
	box-sizing: border-box;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	padding: 12px 14px;
	background: var(--search-surface);
	color: var(--search-text);
	font-size: 13px;
	line-height: 1.4;
}

.syslogSavedDialog .syslogSearchBuilder {
	margin: 0;
}

.syslogSavedPrompt {
	box-sizing: border-box;
}

.syslogSavedPrompt .syslogSavedNameRow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.syslogSavedPrompt .syslogSavedNameRow label {
	font-size: 12px;
	font-weight: 600;
	color: var(--search-text);
	white-space: nowrap;
}

.syslogSavedPrompt .syslogSavedNameRow input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: 4px 8px;
	border: 1px solid var(--search-border);
	border-radius: 5px;
	background: var(--search-card);
	color: var(--search-text);
}

.syslogSearchBuilder .syslogSearchRow {
	display: grid;
	grid-template-columns: 66px 120px 100px 110px minmax(100px, 1fr) 26px;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	padding: 4px 8px;
	border: 1px solid var(--search-border);
	border-radius: 8px;
	background: var(--search-card);
	transition: border-color 120ms;
}

.syslogSearchBuilder .syslogSearchRow:focus-within {
	border-color: var(--search-accent);
	box-shadow: 0 0 0 2px var(--search-tint);
}

.syslogSearchBuilder input,
.syslogSearchBuilder select,
.syslogSearchBuilder button {
	box-sizing: border-box;
	font: inherit;
	color: var(--search-text);
	min-height: 26px;
	margin: 0;
	border-radius: 5px;
}

.syslogSearchBuilder select {
	width: 100%;
	padding: 2px 6px;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
}

.syslogSearchBuilder select:hover {
	background: var(--search-surface);
}

.syslogSearchBuilder .syslogSearchConnector select {
	background: var(--search-tint);
	color: var(--search-accent);
	font-size: 11px;
	font-weight: 700;
}

.syslogSearchBuilder .syslogSearchConnector:empty::after {
	content: '\2022';
	display: block;
	text-align: center;
	color: var(--search-accent);
	font-size: 16px;
	line-height: 1;
}

.syslogSearchBuilder .syslogSearchField {
	font-weight: 600;
}

.syslogSearchBuilder .syslogSearchText,
#syslog_form .syslogSearchPanel > #rfilter {
	width: 100%;
	min-width: 0;
	max-width: 360px;
	padding: 4px 8px;
	/* Fallbacks keep the field outlined outside the search panel tokens. */
	border: 1px solid var(--search-border, #cbd8d1);
	background: var(--search-surface, transparent);
	color: var(--search-text, inherit);
	box-shadow: none;
}
.syslogRuleFilterBuilder .syslogSearchText {
	max-width: 360px;
}
.syslogSearchBuilder .syslogSearchText::placeholder {
	color: var(--search-muted);
	opacity: 0.85;
}

.syslogSearchBuilder .syslogSearchRemove {
	border: 0;
	background: transparent;
	color: var(--search-muted);
	font-size: 16px;
	cursor: pointer;
}

.syslogSearchBuilder .syslogSearchRemove:hover {
	background: #fae8e6;
	color: #9c3327;
}

.syslogSearchBuilder .syslogSearchActions {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}

.syslogSearchBuilder .syslogSearchAdd {
	min-height: 24px;
	padding: 2px 10px;
	border: 1px solid var(--search-border);
	background: var(--search-card);
	color: var(--search-accent);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
}

.syslogSearchBuilder .syslogSearchAdd::before {
	content: '+ ';
	font-size: 13px;
}

.syslogSearchBuilder .syslogSearchAdd:hover {
	background: var(--search-tint);
	border-color: var(--search-accent);
}

#syslog_form .syslogSearchPanel :is(input, select, button, summary):focus-visible {
	outline: 2px solid var(--search-accent);
	outline-offset: 2px;
}

.syslogSearchBuilder .syslogSearchGroupRow {
	grid-template-columns: 66px 145px minmax(0, 1fr) 30px;
}

.syslogSearchBuilder .syslogSearchGroup {
	grid-column: 1 / -1;
	grid-row: 2;
	border-left: 2px solid var(--search-border);
	padding-left: 12px;
	margin-left: 20px;
}

#syslog_form .syslogSearchFooter {
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px solid var(--search-border);
}

#syslog_form #logical_search_help {
	max-width: 620px;
	font-size: 12px;
	color: var(--search-muted);
}

#logical_search_help summary {
	cursor: pointer;
	width: fit-content;
	padding: 2px 0;
}

#syslog_form .syslogSearchOptions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px 16px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--search-border);
}

#syslog_form .syslogSearchOption {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

#syslog_form .syslogSearchOption label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--search-muted);
}

#syslog_form .syslogSearchOption select {
	box-sizing: border-box;
	min-width: 120px;
	max-width: 170px;
	min-height: 26px;
	margin: 0;
	padding: 2px 6px;
	font: inherit;
	color: var(--search-text);
	border: 1px solid var(--search-border);
	border-radius: 5px;
	background: var(--search-card);
	cursor: pointer;
}

#syslog_form .syslogSearchOptionHook {
	flex: 1 1 100%;
}

#syslog_form .syslogSearchSubmit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-left: auto;
	padding: 4px 14px;
	border: 1px solid var(--search-accent);
	border-radius: 6px;
	background: var(--search-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

#syslog_form .syslogSearchSubmit:hover {
	filter: brightness(1.12);
}

#logical_search_error:empty {
	display: none;
}

@media (max-width: 700px) {
	#syslog_form .syslogSearchPanel {
		padding: 12px;
	}

	#syslog_form .syslogSearchHeader {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.syslogSearchBuilder .syslogSearchRow {
		grid-template-columns: 45px minmax(70px, 1fr) minmax(60px, 1fr) minmax(70px, 1fr) 28px;
		gap: 5px;
	}

	.syslogSearchBuilder .syslogSearchText {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.syslogSearchBuilder .syslogSearchRemove {
		grid-column: 5;
		grid-row: 1;
	}

	#syslog_form .syslogSearchOptions {
		gap: 8px 16px;
	}

	#syslog_form .syslogSearchOption select {
		min-width: 100px;
		max-width: none;
	}
}

#syslog_search_content[hidden] {
	display: none;
}

#syslog_form .syslogSearchToggle {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--search-border);
	border-radius: 6px;
	background: var(--search-card);
	color: var(--search-text);
	cursor: pointer;
}

#syslog_form .syslogSearchToggle:hover,
#syslog_form .syslogSearchToggle:focus-visible {
	background: var(--search-tint);
}

/* Active (filter panel expanded): ID-level specificity above sets the toggle's
   own background/border/color and would otherwise swallow .ui-state-active, so
   paint the active look here from the sampled theme accent. */
#syslog_form .syslogSearchToggle.ui-state-active {
	border-color: var(--search-accent);
	background: var(--search-tint);
	color: var(--search-accent);
}

/* Cacti themes set a fixed autocomplete height; short search lists should fit. */
.ui-autocomplete.syslogSearchSuggestions {
	height: auto;
	min-height: 0;
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Menus jQuery UI appends to <body> inherit the theme's .ui-front z-index and
   would render behind open dialogs; lift them above the plugin's modals. */
.ui-selectmenu-menu,
#ui-datepicker-div,
.ui-autocomplete.syslogSearchSuggestions {
	z-index: 9999;
}

/* Engineer workspace: compact controls, flexible message column, optional inspector. */
#syslog_form .syslogSearchPanel {
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	border-radius: 0;
	box-shadow: none;
}
#syslog_form .syslogSearchHeader { margin-bottom: 4px; }
#syslog_form .syslogSearchSavedBar { margin: 0 0 10px; padding: 0; border: 0; }
#syslog_form .syslogSearchSavedBar label { font-size: 12px; text-transform: none; letter-spacing: normal; }
#syslog_search_summary[hidden], #syslog_message_details[hidden] { display: none; }
#syslog_search_summary { padding: 8px 0; overflow-wrap: anywhere; font-family: monospace; }
.syslogQueryLayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.syslogQueryActions { display: flex; align-items: flex-end; gap: 6px; padding-top: 4px; }
.syslogQueryActions .syslogResultsLimit { gap: 0; }
.syslogQueryActions .syslogResultsLimit label { margin-bottom: 1px; }
/* Painted from the sampled theme's header/accent pair (--search-primary /
   --search-on-primary), falling back to the scope accent before JS has run. */
#syslog_form #go { background: var(--search-primary, var(--search-accent)); border: 1px solid var(--search-primary, var(--search-accent)); color: var(--search-on-primary, #fff); padding: 6px 22px; font-weight: 600; }
#syslog_form .syslogSearchRow { border-radius: 4px; }
#syslog_form .syslogSearchFooter { border: 0; margin: 2px 0 0; padding: 0; }
.syslogMenu { position: relative; }
.syslogMenu > summary { cursor: pointer; padding: 5px 10px; border: 1px solid var(--search-border); border-radius: 4px; background: var(--search-card); color: var(--search-text); list-style: none; white-space: nowrap; }
.syslogMenu > summary::-webkit-details-marker { display: none; }
.syslogMenu > summary::after { content: ' ▾'; }
.syslogMenuBody { position: absolute; z-index: 100; top: 100%; right: 0; min-width: 180px; padding: 10px; border: 1px solid var(--search-border); border-radius: 4px; background: var(--search-card); color: var(--search-text); box-shadow: 0 4px 16px #0006; }
.syslogSearchSavedBar .syslogMenuBody { left: 0; right: auto; }
.syslogSearchSavedBar .syslogMenuBody input { display: block; width: 100%; margin-bottom: 6px; text-align: left; }
#syslog_form .syslogMenuBody.syslogSearchOptions { width: 350px; max-width: calc(100vw - 40px); margin: 0; display: flex; }
.syslogResultsToolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 12px; }
#syslog_view_summary { margin-right: auto; opacity: .85; }
#syslog_form .syslogResultsToolbar .syslogSearchOption { flex-direction: row; align-items: center; gap: 8px; }
#syslog_form .syslogResultsToolbar .syslogSearchOption label { font-size: 12px; }
#syslog_form .syslogSearchButtons { display: none; }
#syslog_workspace { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
#syslog_workspace.has-details { grid-template-columns: minmax(0, 1fr) minmax(300px, 26%); }
.syslogResultsMain { min-width: 0; overflow-x: auto; }
#syslog_workspace table { width: 100%; }
/* Severity row tints: a translucent hue per priority mixed over the live theme
   surface, so the same rules read correctly on both light and dark themes. */
#syslog_workspace tr.syslogRow { --syslog-sev: transparent; background: color-mix(in srgb, var(--syslog-sev) 16%, transparent); }
#syslog_workspace tr.syslogRow:nth-child(even) { background: color-mix(in srgb, var(--syslog-sev) 22%, color-mix(in srgb, currentColor 5%, transparent)); }
#syslog_workspace tr.syslogRow:hover { background: color-mix(in srgb, var(--syslog-sev) 32%, color-mix(in srgb, currentColor 9%, transparent)); }
#syslog_workspace tr.syslogRow td:first-child { border-left: 4px solid transparent; }
#syslog_workspace tr.syslogRow.logEmergency { --syslog-sev: #e5484d; }
#syslog_workspace tr.syslogRow.logAlert { --syslog-sev: #e5533b; }
#syslog_workspace tr.syslogRow.logCritical { --syslog-sev: #e0574b; }
#syslog_workspace tr.syslogRow.logError { --syslog-sev: #d9594f; }
#syslog_workspace tr.syslogRow.logWarning { --syslog-sev: #d9a406; }
#syslog_workspace tr.syslogRow.logNotice { --syslog-sev: #3b82c4; }
#syslog_workspace tr.syslogRow.logDebug { --syslog-sev: #8b9690; }
#syslog_workspace tr.syslogRow.logEmergency td:first-child,
#syslog_workspace tr.syslogRow.logAlert td:first-child,
#syslog_workspace tr.syslogRow.logCritical td:first-child,
#syslog_workspace tr.syslogRow.logError td:first-child { border-left-color: #c0392b; }
#syslog_workspace tr.syslogRow.logWarning td:first-child { border-left-color: #d28a00; }
#syslog_workspace tr.syslogRow.logNotice td:first-child { border-left-color: #3478b5; }
#syslog_workspace tr.syslogRow.logInfo td:first-child { border-left-color: #5b9b4b; }
#syslog_workspace tr.syslogRow.logDebug td:first-child { border-left-color: #8b9690; }
#syslog_workspace tr:has(.syslogMessageOpen) td { padding: 3px 8px; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); white-space: nowrap; color: inherit; }
#syslog_workspace tr:has(.syslogMessageOpen) td.syslogMeta { color: color-mix(in srgb, currentColor 72%, transparent); font-size: 12px; }
#syslog_workspace tr:has(.syslogMessageOpen) td:first-child { font-variant-numeric: tabular-nums; }
#syslog_workspace td.syslogMessage { width: 100%; max-width: 0; }
.syslogMessageOpen { display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.syslogValueFilter { padding: 2px 5px; margin: -2px -5px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
/* Pills read like GitHub labels: a translucent hue carries the identity in the
   background and border, while the text stays the theme's own foreground color
   so contrast holds up on both light and dark surfaces. */
.syslogValueFilter:hover, .syslogValueFilter:focus-visible { border-color: color-mix(in srgb, currentColor 32%, transparent); background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; text-decoration-style: solid; }
.syslogHostLabel { --pill-hue: #3b82c4; border-color: color-mix(in srgb, var(--pill-hue) 48%, transparent); background: color-mix(in srgb, var(--pill-hue) 20%, transparent); color: var(--search-text, currentColor); text-decoration: none; }
.syslogProgramLabel { --pill-hue: #8257b5; border-color: color-mix(in srgb, var(--pill-hue) 48%, transparent); background: color-mix(in srgb, var(--pill-hue) 20%, transparent); color: var(--search-text, currentColor); text-decoration: none; }
/* Cacti themes run .button() on every button, so the theme's .ui-button:hover
   paints the message like an editable input; keep it inert. Match the theme's
   selector weight (.ui-button:hover = 0,2,0) and then some. */
.syslogMessageOpen.ui-button:hover, .syslogMessageOpen.ui-button:focus, .syslogMessageOpen.ui-button:active,
.syslogMessageOpen.ui-state-hover, .ui-widget-content .syslogMessageOpen.ui-state-hover,
.syslogMessageOpen.ui-state-focus, .ui-widget-content .syslogMessageOpen.ui-state-focus,
.syslogMessageOpen.ui-state-active, .ui-widget-content .syslogMessageOpen.ui-state-active {
	background: transparent;
	border: 0;
	font-weight: inherit;
	color: inherit;
}
.syslogMessageOpen:focus-visible, #syslog_message_details button:focus-visible, .syslogMenu > summary:focus-visible { outline: 2px solid #276448; outline-offset: 2px; }
.syslogSeverity, .syslogFacility { --pill-hue: #8b9690; display: inline-block; border: 1px solid color-mix(in srgb, var(--pill-hue) 48%, transparent); border-radius: 4px; padding: 3px 8px; color: var(--search-text, currentColor); background: color-mix(in srgb, var(--pill-hue) 20%, transparent); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.syslogSeverity-err, .syslogSeverity-error, .syslogSeverity-emerg, .syslogSeverity-alert, .syslogSeverity-crit { --pill-hue: #e5484d; }
.syslogSeverity-warning, .syslogSeverity-warn { --pill-hue: #d9a406; }
.syslogSeverity-info { --pill-hue: #3f9b4b; }
.syslogSeverity-notice { --pill-hue: #3b82c4; }
.syslogSeverity-debug { --pill-hue: #8b9690; }
.syslogFacility { --pill-hue: #5a8fa8; display: inline-block; border-radius: 3px; padding: 2px 7px; font-size: 12px; }
#syslog_workspace tr.syslogRow.logEmergency .syslogSeverity,
#syslog_workspace tr.syslogRow.logAlert .syslogSeverity,
#syslog_workspace tr.syslogRow.logCritical .syslogSeverity,
#syslog_workspace tr.syslogRow.logError .syslogSeverity { font-weight: 700; box-shadow: 0 0 0 1px #c0392b33; }
#syslog_message_details { position: sticky; top: 0; box-sizing: border-box; max-height: 90vh; overflow: auto; padding: 0 16px 16px; border: 1px solid var(--search-border); background: var(--search-card); color: var(--search-text); box-shadow: -2px 2px 8px #0003; }
#syslog_message_details header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -16px 16px; padding: 12px 16px; }
#syslog_message_details h3 { margin: 0; font-size: 16px; }
#syslog_details_close { min-width: 28px; min-height: 28px; margin: 0; padding: 2px 7px; border-radius: 3px; font-size: 20px; line-height: 1; cursor: pointer; }
#syslog_message_details dl { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr); gap: 12px; margin: 0 0 20px; }
#syslog_message_details dt { font-weight: 600; }
#syslog_message_details dd { margin: 0; overflow-wrap: anywhere; }
#syslog_message_details h4 { margin: 0 0 8px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); font-size: 13px; }
#syslog_details_raw { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; border: 1px solid var(--search-border); background: color-mix(in srgb, currentColor 6%, transparent); font: 13px/1.6 monospace; user-select: text; }
.syslogDetailsActions, .syslogDetailsFilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
#syslog_copy_status { display: block; padding-top: 8px; }
@media (max-width: 1000px) {
	#syslog_workspace.has-details { grid-template-columns: minmax(0, 1fr); }
	#syslog_message_details { position: fixed; z-index: 101; right: 0; top: 10vh; bottom: 0; width: min(420px, 100%); box-shadow: -4px 0 18px #0003; }
	.syslogQueryLayout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
	#syslog_form .syslogSearchPanel { padding: 8px; }
	.syslogResultsToolbar { padding: 8px; }
	#syslog_view_summary { flex-basis: 100%; }
	#syslog_form .syslogMenuBody.syslogSearchOptions { left: 0; right: auto; width: 280px; }
	#syslog_workspace table { min-width: 850px; }
}
#syslog_form .syslogSearchPanel { position: relative; }
#syslog_form .syslogSearchHeader { position: absolute; top: 10px; right: 12px; }
#syslog_form .syslogSearchHeading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#syslog_form .syslogSearchToggle { width: auto; gap: 8px; padding: 4px 8px; }
#syslog_form .syslogSearchSavedBar { padding-right: 140px; min-height: 28px; }
.syslogSearchBuilder .syslogSearchRow:not(.syslogSearchGroupRow) {
	box-sizing: border-box;
	width: min(100%, 860px);
	grid-template-columns: 60px 120px 170px minmax(220px, 420px) 26px;
}
.syslogSearchBuilder .syslogSearchRow > .ui-selectmenu-button {
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0;
}
#syslog_message_details { resize: horizontal; min-width: 280px; max-width: 50vw; }
@media (max-width: 1000px) { #syslog_message_details { max-width: 100vw; resize: none; } }
@media (max-width: 700px) {
	#syslog_form .syslogSearchSavedBar { padding-right: 0; padding-top: 34px; }
	.syslogSearchBuilder .syslogSearchRow:not(.syslogSearchGroupRow) { grid-template-columns: 45px minmax(65px, 1fr) minmax(120px, 1fr) 28px; }
}
#syslog_workspace.has-details { grid-template-columns: minmax(0, 1fr) auto; }
#syslog_message_details { width: clamp(300px, 26vw, 480px); }
@media (max-width: 1000px) {
	#syslog_workspace.has-details { grid-template-columns: minmax(0, 1fr); }
	#syslog_message_details { width: min(420px, 100%); }
}

/* Selection must not replace the severity background supplied by Cacti. */
#syslog_workspace tr.syslogSelected { outline: 2px solid currentColor; outline-offset: -2px; }
/* Any part of a row carrying a message opens the details pane. */
#syslog_workspace tr.syslogRowOpen { cursor: pointer; }
#syslog_workspace tr.syslogRowOpen:hover td:not(:has(.syslogMessageOpen, a, button)) { filter: brightness(0.92); }
.syslogDetailsRules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
#syslog_message_details .syslogRuleButton { display: inline-block; padding: 8px 10px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 4px; text-decoration: none; color: inherit; }
#syslog_message_details .syslogRuleButton[hidden] { display: none; }
#syslog_message_details .syslogRuleButton:hover { text-decoration: underline; }
#syslog_message_details .syslogRuleButton:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 700px) {
	.syslogSearchBuilder .syslogSearchRow:not(.syslogSearchGroupRow) .syslogSearchRemove { grid-column: 4; }
}

/* Syslog Status cards: a responsive flex grid of theme-aware cards (a
   Bootstrap-style card layout without Bootstrap). Kept in the plugin for now;
   intended to move into Cacti core later. Colours follow the sampled theme
   tokens that js applies to #syslog_status, so the cards differentiate from the
   page surface on both light and dark themes. */
#syslog_status.syslogStatusGrid {
	display: grid;
	/* an 8-column grid; each card occupies a number of columns via a span class */
	grid-template-columns: repeat(8, minmax(0, 1fr));
	align-items: start;
	gap: 14px;
	margin: 10px 4px;
	font-variant-numeric: tabular-nums;
}

/* Column span out of 8 (Bootstrap-like, but 8 columns). Default cards span 2;
   wide tables span 4. The card rendering API chooses the span per card. */
.syslogStatusSpan1 { grid-column: span 1; }
.syslogStatusSpan2 { grid-column: span 2; }
.syslogStatusSpan3 { grid-column: span 3; }
.syslogStatusSpan4 { grid-column: span 4; }
.syslogStatusSpan5 { grid-column: span 5; }
.syslogStatusSpan6 { grid-column: span 6; }
.syslogStatusSpan7 { grid-column: span 7; }
.syslogStatusSpan8 { grid-column: span 8; }

.syslogStatusCard {
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--search-border, #cbd8d1);
	/* lift the card off the page surface on both light and dark themes */
	background: color-mix(in srgb, var(--search-text, #23362f) 4%, var(--search-card, #fff));
	color: var(--search-text, #23362f);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.syslogStatusCardHeader {
	box-sizing: border-box;
	/* fixed row height so a tool/handle hover highlight never reflows the header */
	min-height: 34px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-bottom: 1px solid var(--search-border, #cbd8d1);
	/* paint like the active theme's native html_start_box title bar */
	background-color: var(--search-header-bg, #e5ece8);
	background-image: var(--search-header-image, none);
	background-repeat: repeat-x;
	color: var(--search-header-fg, var(--search-text, #23362f));
}

/* Drag handle: grab the card by its header to reorder it. */
.syslogStatusCardDrag {
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 2px 5px;
	/* reserve the border so a hover/focus highlight recolours it instead of resizing the header */
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: color-mix(in srgb, currentColor 50%, transparent);
	font-size: 13px;
	line-height: 1;
	cursor: grab;
}

.syslogStatusCardDrag:hover,
.syslogStatusCardDrag:focus-visible {
	color: currentColor;
	border-color: transparent;
	background: color-mix(in srgb, currentColor 12%, transparent);
	outline: none;
}

.syslogStatusCardDrag:active {
	cursor: grabbing;
}

.syslogStatusCardTitle {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	/* keep the title to one line so a long title (or a width change mid-drag) never reflows the header */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.syslogStatusCardDragging {
	opacity: 0.5;
}

/* "Add card" toolbar above the grid. */
.syslogStatusToolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 10px 4px 0;
}

.syslogStatusToolbarLabel {
	font-size: 12px;
	font-weight: 600;
	color: var(--search-text, #23362f);
}

.syslogStatusAdd {
	box-sizing: border-box;
	min-width: 220px;
	padding: 4px 8px;
	border: 1px solid var(--search-border, #cbd8d1);
	border-radius: 7px;
	background: var(--search-card, #fff);
	color: var(--search-text, #23362f);
	font-size: 12px;
}

/* Auto-refresh interval + manual refresh, pushed to the right of the toolbar. */
.syslogStatusRefresh {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.syslogStatusRefreshInterval {
	box-sizing: border-box;
	padding: 4px 8px;
	border: 1px solid var(--search-border, #cbd8d1);
	border-radius: 7px;
	background: var(--search-card, #fff);
	color: var(--search-text, #23362f);
	font-size: 12px;
}

.syslogStatusRefreshNow {
	font-size: 14px;
}

/* Per-card header tools: show more/less, maximize, refresh, remove. */
.syslogStatusCardTools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 1px;
}

.syslogStatusCardTool {
	box-sizing: border-box;
	padding: 2px 5px;
	/* reserve the border so a hover/focus highlight recolours it instead of resizing the header */
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: color-mix(in srgb, currentColor 50%, transparent);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

.syslogStatusCardTool:hover,
.syslogStatusCardTool:focus-visible {
	color: currentColor;
	border-color: transparent;
	background: color-mix(in srgb, currentColor 12%, transparent);
	outline: none;
}

/* Only the control matching the card's current state is shown. */
.syslogStatusCard:not(.syslogStatusCardExpanded) .syslogStatusCardTool[data-tool="collapse"],
.syslogStatusCardExpanded .syslogStatusCardTool[data-tool="expand"] {
	display: none;
}

/* Expandable cards clip to a fixed height until "show more"; a fade hints at the
   clipped content. */
.syslogStatusCardExpandable:not(.syslogStatusCardExpanded) .syslogStatusCardBody {
	position: relative;
	max-height: 210px;
	overflow: hidden;
}

.syslogStatusCardExpandable:not(.syslogStatusCardExpanded) .syslogStatusCardBody::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
	pointer-events: none;
	background: linear-gradient(transparent, color-mix(in srgb, var(--search-text, #23362f) 4%, var(--search-card, #fff)));
}

/* Maximize dialog: reuse the card body typography on the themed dialog surface. */
.syslogStatusDialog {
	font-variant-numeric: tabular-nums;
}

.syslogStatusDialogBody {
	color: var(--search-text, #23362f);
}

.syslogStatusDialogBody .syslogStatusTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.syslogStatusDialogBody .syslogStatusTable th,
.syslogStatusDialogBody .syslogStatusTable td {
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.syslogStatusDialogBody .syslogStatusTable thead th {
	font-weight: 600;
	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.syslogStatusDialogBody .syslogStatusTable tbody th {
	font-weight: normal;
}

.syslogStatusDialogBody .syslogStatusTable tbody tr + tr > th,
.syslogStatusDialogBody .syslogStatusTable tbody tr + tr > td {
	border-top: 1px solid color-mix(in srgb, currentColor 9%, transparent);
}

/* Header severity variants. Every card header carries exactly one: a neutral
   grey "no severity" default, or good / warning / in-trouble. A single
   translucent colour layer is drawn over the sampled native theme header so the
   strength stays consistent on solid and gradient themes, light and dark. */
.syslogStatusCardHeader--none {
	background-color: var(--search-header-bg, #e5ece8);
	background-image: linear-gradient(rgba(140, 149, 159, 0.20), rgba(140, 149, 159, 0.20)), var(--search-header-image, none);
	border-bottom-color: color-mix(in srgb, #8c959f 45%, transparent);
}

.syslogStatusCardHeader--up {
	background-color: var(--search-header-bg, #e5ece8);
	background-image: linear-gradient(rgba(148, 179, 107, 0.32), rgba(148, 179, 107, 0.32)), var(--search-header-image, none);
	border-bottom-color: color-mix(in srgb, #94b36b 60%, transparent);
}

.syslogStatusCardHeader--recovering {
	background-color: var(--search-header-bg, #e5ece8);
	background-image: linear-gradient(rgba(255, 143, 30, 0.32), rgba(255, 143, 30, 0.32)), var(--search-header-image, none);
	border-bottom-color: color-mix(in srgb, #ff8f1e 60%, transparent);
}

.syslogStatusCardHeader--down {
	background-color: var(--search-header-bg, #e5ece8);
	background-image: linear-gradient(rgba(204, 0, 0, 0.34), rgba(204, 0, 0, 0.34)), var(--search-header-image, none);
	border-bottom-color: color-mix(in srgb, #cc0000 60%, transparent);
}

.syslogStatusCardBody {
	padding: 4px 12px 10px;
	overflow-x: auto;
}

.syslogStatusTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.syslogStatusTable th,
.syslogStatusTable td {
	padding: 7px 8px;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.syslogStatusTable thead th {
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* identifying first-cell row headers read as normal data, not bold labels */
.syslogStatusTable tbody th {
	font-weight: normal;
}

.syslogStatusTable tbody tr + tr > th,
.syslogStatusTable tbody tr + tr > td {
	border-top: 1px solid color-mix(in srgb, currentColor 9%, transparent);
}

.syslogStatusKv th.syslogStatusKvLabel {
	width: 45%;
	font-weight: normal;
	color: color-mix(in srgb, currentColor 72%, transparent);
}

.syslogStatusKv td {
	font-weight: 600;
}

.syslogStatusRuleDetail {
	color: color-mix(in srgb, currentColor 78%, transparent);
}

.syslogStatusEmpty {
	color: color-mix(in srgb, currentColor 65%, transparent);
	font-style: italic;
}

.syslogStatusNote {
	margin: 8px 2px 2px;
	padding: 8px 10px;
	border-radius: 6px;
	border-inline-start: 3px solid var(--search-accent, #276448);
	background: color-mix(in srgb, var(--search-accent, #276448) 10%, transparent);
	font-size: 12px;
}

.syslogStatusNoteLabel {
	font-weight: 600;
}

/* Narrow the grid before cards get cramped: halve to 4 columns (wide span-4+
   cards fill the row), then collapse to a single column on small screens. */
@media (max-width: 1200px) {
	#syslog_status.syslogStatusGrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.syslogStatusSpan4,
	.syslogStatusSpan5,
	.syslogStatusSpan6,
	.syslogStatusSpan7,
	.syslogStatusSpan8 {
		grid-column: 1 / -1;
	}
}

@media (max-width: 760px) {
	#syslog_status.syslogStatusGrid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.syslogStatusSpan1,
	.syslogStatusSpan2,
	.syslogStatusSpan3,
	.syslogStatusSpan4,
	.syslogStatusSpan5,
	.syslogStatusSpan6,
	.syslogStatusSpan7,
	.syslogStatusSpan8 {
		grid-column: 1 / -1;
	}
}

/* Rule preview ("Test rule") */
.syslogRuleTestResult {
	max-height: 420px;
	overflow: auto;
	text-align: left;
}

.syslogRuleTestResult table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}

.syslogRuleTestResult th,
.syslogRuleTestResult td {
	padding: 6px 10px;
	text-align: left;
	overflow-wrap: anywhere;
	font-size: 0.95em;
}

.syslogRuleTestError {
	padding: 8px 0;
	text-align: left;
}

.syslogRuleTestCount {
	font-weight: 600;
}

/* Legend footer: keeps each legend centered beneath the results in normal
   document flow, so it never overlays the bottom pagination or final rows. */
.syslogLegendFooter {
	display: table;
	width: 100%;
	margin: 8px auto 0;
}