:root {
	--rw-primary: #078baa;
	--rw-primary-hover: #046f88;
	--rw-danger: #c83b3b;
	--rw-danger-hover: #a92d2d;
	--rw-success: #2f8f55;
	--rw-warning: #9b6b08;
	--rw-surface: #fff;
	--rw-surface-muted: #f4f5f6;
	--rw-border: #d9dde2;
	--rw-text-muted: #66717d;
	--rw-radius: 8px;
}

*:focus-visible {
	outline: 3px solid rgba(7, 139, 170, .35);
	outline-offset: 2px;
}

.rw-button,
button.rw-button,
a.rw-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 20px;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
}
.rw-button-primary { color: #fff !important; border-color: var(--rw-primary) !important; background: var(--rw-primary) !important; }
.rw-button-primary:hover { background: var(--rw-primary-hover) !important; }
.rw-button-secondary { color: #26323d !important; border-color: var(--rw-border) !important; background: #eceff2 !important; }
.rw-button-secondary:hover { background: #e0e5e9 !important; }
.rw-button-danger { color: #fff !important; border-color: var(--rw-danger) !important; background: var(--rw-danger) !important; }
.rw-button-danger:hover { background: var(--rw-danger-hover) !important; }
.rw-button:disabled { cursor: not-allowed; opacity: .55; }
.rw-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--rw-border) !important;
	border-radius: 6px;
	background: #eceff2 !important;
	cursor: pointer;
}

/* Plain overflow menus in both themes; keep the existing keyboard focus ring. */
button.rw-icon-button.admin-actions-toggle,
button.rw-icon-button.service-actions-toggle,
#change-center .change-actions button.change-action-more {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
}

.rw-card,
.rw-panel {
	box-sizing: border-box;
	border: 1px solid var(--rw-border);
	border-radius: var(--rw-radius);
	background: var(--rw-surface);
}
.rw-panel { padding: 16px; }

.rw-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
}
.rw-status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rw-status-running { color: #226f40; background: #e2f4e9; }
.rw-status-stopped { color: #9b2f2f; background: #fbe5e5; }
.rw-status-unavailable { color: #745816; background: #fff2cc; }
.rw-status-stale { color: #5d6570; background: #e8ebee; }

.rw-table-shell { width: 100%; overflow-x: auto; border-radius: var(--rw-radius); }
.rw-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }
.rw-table-search-toolbar { box-sizing: border-box; padding-inline: var(--indent); }
.rw-table-toolbar input[type="search"] { width: min(240px, 100%); min-width: 0; }
.rw-table-pager { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin: 10px 0; }
.rw-table-pager[hidden] { display: none; }
.rw-table-empty[hidden] { display: none; }
table[data-ux-table] thead th[role="button"] { cursor: pointer; padding-right: 24px; position: relative; }
table[data-ux-table] thead th[role="button"]::after {
	color: var(--rw-text-muted);
	content: "↕";
	font-size: 12px;
	opacity: .55;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
}
table[data-ux-table] thead th[aria-sort="ascending"]::after { color: var(--rw-primary); content: "▲"; opacity: 1; }
table[data-ux-table] thead th[aria-sort="descending"]::after { color: var(--rw-primary); content: "▼"; opacity: 1; }
.rw-form-field { display: grid; gap: 6px; }
.rw-form-field > label { font-weight: 700; }
.rw-form-field input,
.rw-form-field select,
.rw-form-field textarea { box-sizing: border-box; max-width: 100%; min-height: 20px; }

.rw-empty-state,
.rw-loading-state,
.rw-error-state,
.rw-operation-result {
	padding: 22px;
	border: 1px dashed var(--rw-border);
	border-radius: var(--rw-radius);
	text-align: center;
	color: var(--rw-text-muted);
}
.rw-error-state { border-color: #e5a6a6; color: #8e2828; background: #fff4f4; }
.rw-operation-result pre,
.rw-notification-raw { max-height: 38vh; overflow: auto; padding: 12px; white-space: pre-wrap; background: #20252b; color: #f5f7f9; border-radius: 6px; }
.rw-notification-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 12px; margin: 12px 0; }
.rw-notification-details dt { font-weight: 700; }
.rw-notification-details dd { margin: 0; }
.rw-notification-dialog { max-width: 100%; }

.nettools-workspace {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	gap: var(--indent);
	align-items: start;
	box-sizing: border-box;
	width: 100%;
	padding: var(--indent);
}
.nettools-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(280px, 1fr));
	gap: 14px;
}
.nettool-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	min-height: 150px;
	padding: 0 12px 12px;
	overflow: hidden;
}
.nettool-card > h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 -12px 2px;
	font-size: 1.2em;
}
.nettool-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.nettool-fields-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nettool-card .rw-form-field { align-content: start; min-width: 0; }
.nettool-card .rw-form-field > label {
	margin: 0;
	padding: 0;
}
.nettool-card .rw-form-field input,
.nettool-card .rw-form-field select,
.nettool-card .ui-selectmenu-button.ui-button {
	width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
}
.nettool-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.nettools-result {
	position: sticky;
	top: 12px;
	min-width: 0;
}
.nettools-result > h3 { margin: -16px -16px 14px; padding: 10px 12px; font-size: 1.2em; }
.nettools-result #ajax-nettools {
	max-height: 70vh;
	overflow: auto;
	text-align: left;
}

.service-overview-page { box-sizing: border-box; padding: var(--indent); }
.service-page-toolbar { margin-top: 0; padding: 0 0 12px; }
.service-page-toolbar .rw-form-field { grid-template-columns: auto auto; align-items: center; }
.service-overview-page .service-page-toolbar #service-server-search {
	width: 160px;
	height: 28px;
	min-width: 0;
	min-height: 28px;
	max-width: 160px;
	padding: 3px 6px;
}
.service-poll-summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 7px 10px;
	border-radius: 6px;
	background: var(--rw-surface-muted);
	color: var(--rw-text-muted);
}
.service-poll-summary-icon { color: var(--rw-primary); }
.service-poll-summary.is-updating .service-poll-summary-icon { animation: rw-service-poll-spin 1s linear infinite; }
.service-poll-summary.is-updating .service-poll-summary-value { min-width: 16px; }
@keyframes rw-service-poll-spin { to { transform: rotate(360deg); } }
.service-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); gap: 14px; align-items: start; }
.service-card-placeholder { box-sizing: border-box; min-height: 185px; border: 2px dashed var(--rw-primary); border-radius: var(--rw-radius); background: rgba(2, 134, 155, .08); }
.service-card-grid .service-card,
.service-detail-layout > .service-card {
	position: relative;
	height: auto;
	min-height: 185px;
	padding: 0 12px 14px;
	border-width: 1px 1px 1px 5px;
	border-style: solid;
	border-color: var(--rw-border);
	box-shadow: 0 2px 7px rgba(28, 39, 49, .07);
}
.service-card-grid .service-card {
	float: none;
	width: auto;
	margin: 0;
}
.service-card-grid .service-card.div-server-head-up,
.service-detail-layout > .service-card.div-server-head-up { border-left-color: var(--rw-success); }
.service-card-grid .service-card.div-server-head-down,
.service-detail-layout > .service-card.div-server-head-down { border-left-color: var(--rw-danger); }
.service-card-grid .service-card.div-server-head-unknown,
.service-detail-layout > .service-card.div-server-head-unknown { border-left-color: #c08a1a; }
.service-card[data-detail-url] { cursor: pointer; }
.service-card .server-name { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; width: auto; min-height: 30px; }
.service-card .service-status-badge { margin-right: auto; }
.service-feature { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 5px; background: var(--rw-surface-muted); color: var(--rw-text-muted); font-size: 12px; font-weight: 600; }
.service-feature-enabled { color: #226f40; background: #e2f4e9; }
.service-feature-disabled { color: #9b2f2f; background: #fbe5e5; }
.service-card .server-desc { width: auto; min-height: 66px; line-height: 1.35; }
.service-card .server-act-links { float: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.service-card .service-last-checked { display: inline-block; margin-left: 10px; color: var(--rw-text-muted); }
.service-detail-layout {
	box-sizing: border-box;
	padding: 0 var(--indent);
}
.service-detail-layout::after {
	display: table;
	clear: both;
	content: "";
}
.service-detail-layout > .service-card {
	box-sizing: border-box;
	margin-left: 0;
}
.service-detail-layout > .div-backends {
	clear: both;
	float: none;
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}
.service-detail-layout > .ajax-server:empty { display: none; }
.service-actions { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.service-actions-toggle { flex: 0 0 36px; width: 36px !important; padding: 0 !important; }
.service-drag-handle { cursor: grab !important; touch-action: none; }
.service-drag-handle:active { cursor: grabbing !important; }
.service-actions-menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 5px);
	right: 0;
	min-width: 190px;
	padding: 6px;
	border: 1px solid var(--rw-border);
	border-radius: 7px;
	background: var(--rw-surface);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.service-actions-menu[hidden] { display: none; }
.service-actions-menu button,
.service-actions-menu a {
	display: flex;
	align-items: center;
	gap: 9px;
	box-sizing: border-box;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: inherit !important;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.service-actions-menu button:hover,
.service-actions-menu a:hover { background: var(--rw-surface-muted); }
.service-actions-menu .service-action-danger { color: var(--rw-danger) !important; }

/* Row actions shared by every Admin Area table. */
.admin-actions-cell {
	box-sizing: border-box;
	width: 1%;
	min-width: 68px;
	padding-right: 12px !important;
	text-align: center;
	white-space: nowrap;
}
.admin-actions {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.admin-actions-toggle {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38px !important;
	min-width: 38px !important;
	height: 34px;
	padding: 0 !important;
}
.admin-actions-menu {
	position: fixed;
	z-index: 10020;
	box-sizing: border-box;
	min-width: 210px;
	max-height: calc(100vh - 16px);
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--rw-border);
	border-radius: 7px;
	background: var(--rw-surface);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	color: var(--rw-text);
	text-align: left;
}
.admin-actions-menu[hidden] { display: none !important; }
.admin-actions-menu .admin-action-item {
	display: flex !important;
	align-items: center;
	gap: 9px;
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 8px 10px !important;
	border: 0 !important;
	border-radius: 5px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	text-align: left !important;
	text-decoration: none !important;
	cursor: pointer;
}
.admin-actions-menu .admin-action-item:hover,
.admin-actions-menu .admin-action-item:focus-visible {
	background: var(--rw-surface-muted) !important;
}
.admin-actions-menu .admin-action-item:disabled {
	opacity: .45;
	cursor: default;
}
.admin-actions-menu .admin-action-item-danger { color: var(--rw-danger) !important; }
.admin-actions-empty { color: var(--rw-text-muted); }

.config-editor-file-picker {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	margin: 14px var(--indent) 0 15px;
}
.config-editor-file-picker label { flex: 0 0 auto; font-weight: 600; }
.config-editor-file-picker .select2-container { width: min(520px, 48vw) !important; }
.config-editor-form { margin-top: 14px; margin-right: var(--indent); }
.change-advanced-settings {
	margin: 14px 0;
	padding: 12px 14px;
	border: 1px solid var(--rw-border);
	border-radius: var(--rw-radius-sm);
	background: var(--rw-surface-muted);
}
.change-advanced-settings summary { cursor: pointer; font-weight: 700; }
.change-advanced-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
	margin-top: 14px;
}
.change-advanced-grid label { display: grid; gap: 5px; }
.change-advanced-grid input,
.change-advanced-grid select { box-sizing: border-box; width: 100%; }
.change-advanced-check { display: block; margin: 14px 0; }
.change-notification-destinations {
	display: grid;
	gap: 10px;
	margin-bottom: 6px;
	padding: 10px 12px;
	border: 1px solid var(--rw-border);
	border-radius: var(--rw-radius-sm);
	background: var(--rw-surface);
}
.change-notification-group { display: grid; gap: 6px; }
.change-notification-recipient-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 14px;
}
.change-notification-recipient-list label {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	min-width: 0;
}
.change-notification-recipient-name { display: block; }
.change-notification-recipient-address {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}
.change-rollout-preview { overflow-x: auto; }
.change-rollout-preview-table { width: 100%; }
.change-rollout-preview-table th,
.change-rollout-preview-table td { padding: 7px 9px; text-align: left; }
.change-rollout-preview-table th:nth-child(n+3),
.change-rollout-preview-table td:nth-child(n+3) { text-align: center; }
@media (max-width: 700px) {
	.change-advanced-grid { grid-template-columns: 1fr; }
	.change-notification-recipient-list { grid-template-columns: 1fr; }
}
.config-editor-card {
	overflow: hidden;
	border: 1px solid #d7dce2;
	border-radius: 14px;
	background: #fff;
}
.config-editor-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	box-sizing: border-box;
	min-height: 62px;
	padding: 10px 16px;
	border-bottom: 1px solid #d7dce2;
	background: #f5f7f9;
}
.config-editor-file {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 3px;
}
.config-editor-file-name {
	overflow: hidden;
	color: #202a35;
	font-size: 15px;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.config-editor-file-path {
	overflow: hidden;
	color: #61758a;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: 12px;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.config-editor-state {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.config-editor-state.is-saved { color: var(--rw-success); }
.config-editor-state.is-dirty { color: var(--rw-warning); }
.config-dirty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	font-size: 14px;
	line-height: 1;
}
.config-editor-shell { overflow: hidden; background: #fbfcfd; }
.config-editor-shell textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 480px;
	padding: 24px;
	border: 0;
	background: #fbfcfd;
	color: #202a35;
	font: 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.config-editor-shell .CodeMirror {
	width: 100%;
	height: min(68vh, 720px);
	min-height: 480px;
	background: #fbfcfd;
	color: #202a35;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: 15px;
	line-height: 1.6;
}
.config-editor-shell .CodeMirror-lines { padding: 22px 0; }
.config-editor-shell .CodeMirror pre.CodeMirror-line,
.config-editor-shell .CodeMirror pre.CodeMirror-line-like { padding: 0 14px; }
.config-editor-shell .CodeMirror-gutters {
	border-right: 1px solid #e1e5ea;
	background: #f3f5f7;
}
.config-editor-shell .CodeMirror-linenumber { color: #89939e; }
.config-editor-shell .CodeMirror-guttermarker-subtle { color: #697887; }
.config-editor-shell .CodeMirror-cursor { border-left-color: #202a35; }
.config-editor-shell .CodeMirror-selected { background: #d8eafd !important; }
.config-editor-shell .CodeMirror-focused .CodeMirror-selected { background: #c7e1fb !important; }
.config-editor-shell .CodeMirror-matchingbracket {
	color: #102a43 !important;
	background: #ccebf3;
	outline: 1px solid #078baa;
}
.config-editor-shell .cm-keyword,
.config-editor-shell .cm-variable-2 { color: #007a99; }
.config-editor-shell .cm-string-2 { color: #237a3b; }
.config-editor-shell .cm-string { color: #287d3c; }
.config-editor-shell .cm-number,
.config-editor-shell .cm-atom { color: #7541a6; }
.config-editor-shell .cm-variable,
.config-editor-shell .cm-def { color: #202a35; }
.config-editor-shell .cm-meta { color: #946200; }
.config-editor-shell .cm-comment { color: #66717d; font-style: italic; }
.config-editor-shell .CodeMirror-dialog {
	border-color: #d7dce2;
	background: #f5f7f9;
	color: #202a35;
}
.config-editor-shell .CodeMirror-dialog input { color: #202a35; }
.config-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.config-draft-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; text-align: left; }
.config-draft-banner[hidden],
.config-validation-result[hidden] { display: none; }
.config-draft-banner > span { margin-right: auto; }
.config-validation-result { margin: 10px 0; text-align: left; }
#config-review-diff { max-height: 58vh; overflow: auto; }

.app-mobile-nav-toggle,
.app-nav-backdrop { display: none; }

@media (max-width: 1380px) {
	.nettools-workspace { grid-template-columns: 1fr; }
	.nettools-result { position: static; }
}

@media (max-width: 900px) {
	.top-menu {
		width: min(290px, 86vw) !important;
		transform: translateX(-105%);
		transition: transform .2s ease;
		box-shadow: 6px 0 20px rgba(0, 0, 0, .18);
	}
	html.nav-mobile-open .top-menu { transform: translateX(0); }
	html.nav-collapsed .top-menu { width: min(290px, 86vw) !important; }
	html.nav-collapsed .app-nav-logo,
	html.nav-collapsed .app-nav-search,
	html.nav-collapsed .nav-group-toggle,
	html.nav-collapsed .nav-label,
	html.nav-collapsed .nav-submenu-toggle,
	html.nav-collapsed .app-nav-empty { display: flex !important; }
	html.nav-collapsed .v_menu { display: none; }
	.container,
	.footer,
	html.nav-collapsed .container,
	html.nav-collapsed .footer { margin-left: 0 !important; width: auto !important; }
	.container { padding-top: 42px; }
	.app-mobile-nav-toggle {
		display: inline-flex;
		position: fixed;
		top: 8px;
		left: 8px;
		z-index: 1001;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border: 1px solid var(--rw-border);
		border-radius: 7px;
		background: var(--rw-surface);
	}
	.app-nav-backdrop {
		position: fixed;
		inset: 0;
		z-index: 999;
		border: 0;
		background: rgba(0, 0, 0, .38);
	}
	html.nav-mobile-open .app-nav-backdrop { display: block; }
	html.nav-mobile-open { overflow: hidden; }
	.ui-dialog { max-width: calc(100vw - 16px) !important; }
	.ui-dialog.rw-dialog-responsive { inset: 8px !important; width: auto !important; max-height: calc(100vh - 16px); }
	.ui-dialog.rw-dialog-responsive .ui-dialog-content { max-height: calc(100vh - 125px) !important; }
}

@media (max-width: 720px) {
	.nettools-grid,
	.nettool-fields,
	.nettool-fields-three { grid-template-columns: 1fr; }
	.nettools-workspace { gap: 14px; padding: 12px; }
	.nettool-card { min-height: 0; }
	.config-editor-form { margin-right: var(--indent); }
	.config-editor-file-picker {
		align-items: stretch;
		flex-direction: column;
		margin-right: var(--indent);
	}
	.config-editor-file-picker .select2-container { width: 100% !important; }
	.config-editor-card-header {
		align-items: flex-start;
		flex-direction: column;
		min-height: 0;
		padding: 10px 12px;
	}
	.config-editor-file-path {
		overflow-wrap: anywhere;
		white-space: normal;
	}
	.config-editor-state { white-space: normal; }
	.config-editor-shell .CodeMirror,
	.config-editor-shell textarea {
		height: 58vh;
		min-height: 360px;
		font-size: 13px;
	}
	.service-card-grid { grid-template-columns: minmax(0, 1fr); }
	.service-page-toolbar .rw-form-field { grid-template-columns: 1fr; width: 100%; }
	.service-overview-page .service-page-toolbar #service-server-search {
		width: 100%;
		max-width: 100%;
	}
	.service-poll-summary { width: 100%; margin-left: 0; }
	.rw-table-responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.rw-table-responsive,
	.rw-table-responsive tbody,
	.rw-table-responsive tr,
	.rw-table-responsive td { display: block; width: 100% !important; box-sizing: border-box; }
	.rw-table-responsive tr { padding: 10px; border-bottom: 1px solid var(--rw-border); }
	.rw-table-responsive td { display: grid; grid-template-columns: minmax(100px, 38%) 1fr; gap: 10px; padding: 6px !important; }
	.rw-table-responsive td::before { content: attr(data-label); font-weight: 700; }
	.rw-notification-details { grid-template-columns: 1fr; }
}