: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: 34px;
	box-sizing: border-box;
	padding: 7px 13px;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
}
.rw-button-primary { color: #fff !important; background: var(--rw-primary); }
.rw-button-primary:hover { background: var(--rw-primary-hover); }
.rw-button-secondary { color: #26323d !important; border-color: var(--rw-border); background: #eceff2; }
.rw-button-secondary:hover { background: #e0e5e9; }
.rw-button-danger { color: #fff !important; background: var(--rw-danger); }
.rw-button-danger:hover { background: var(--rw-danger-hover); }
.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);
	border-radius: 6px;
	background: #eceff2;
	cursor: pointer;
}

.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-card { padding: 14px; }

.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-toolbar input[type="search"] { min-width: min(320px, 100%); }
.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; }
.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: 34px; }

.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(280px, 1fr); gap: 18px; align-items: start; }
.nettools-grid { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 14px; }
.nettool-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nettool-card h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.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-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.nettools-result { position: sticky; top: 12px; min-width: 0; }
.nettools-result h3 { margin-top: 0; }
.nettools-result #ajax-nettools { max-height: 70vh; overflow: auto; text-align: left; }

.service-page-toolbar { padding: 12px 0; }
.service-page-toolbar .rw-form-field { grid-template-columns: auto minmax(180px, 300px); align-items: center; }
.service-poll-summary { margin-left: auto; color: var(--rw-text-muted); }
.service-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); gap: 14px; align-items: start; }
.service-card-grid .service-card {
	position: relative;
	float: none;
	width: auto;
	height: auto;
	min-height: 205px;
	margin: 0;
	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.div-server-head-up { border-left-color: var(--rw-success); }
.service-card-grid .service-card.div-server-head-down { border-left-color: var(--rw-danger); }
.service-card-grid .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: 8px; width: auto; height: auto; min-height: 35px; }
.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; height: auto; min-height: 76px; margin: 10px 0; line-height: 1.65; }
.service-card .server-act-links { float: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.service-card .service-last-checked { display: inline-block; margin-left: 10px; color: var(--rw-text-muted); }
.service-actions { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.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; }

.config-editor-form { margin-right: 12px; }
.config-editor-heading { display: flex; justify-content: flex-end; margin: 8px 0; }
.config-editor-shell { overflow: hidden; border: 1px solid var(--rw-border); border-radius: var(--rw-radius); }
.config-editor-shell .CodeMirror { width: 100%; }
.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: 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; }
	.nettools-workspace { grid-template-columns: 1fr; }
	.nettools-result { position: static; }
}

@media (max-width: 620px) {
	.nettools-grid,
	.nettool-fields,
	.nettool-fields-three { grid-template-columns: 1fr; }
	.service-card-grid { grid-template-columns: minmax(0, 1fr); }
	.service-page-toolbar .rw-form-field { grid-template-columns: 1fr; 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; }
}