/* 30site Router User Manager for MikroTik — free edition admin styles */

.mikrotik-umw-wrap .mikrotik-umw-intro {
	max-width: 760px;
	font-size: 14px;
	color: #50575e;
}

.mikrotik-umw-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
	margin-top: 16px;
}

.mikrotik-umw-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 18px 20px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
}

.mikrotik-umw-grid > .mikrotik-umw-card:first-child {
	flex: 1 1 520px;
	min-width: 320px;
}

.mikrotik-umw-aside {
	flex: 0 1 300px;
	min-width: 260px;
	border-color: #c6e9e4;
	background: linear-gradient( 180deg, #f4fbfa 0%, #ffffff 60% );
}

.mikrotik-umw-aside h2 {
	margin: 6px 0 10px;
	font-size: 16px;
}

.mikrotik-umw-list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.mikrotik-umw-list li {
	position: relative;
	padding: 4px 0 4px 22px;
	font-size: 13px;
	color: #3c434a;
}

.mikrotik-umw-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #15b8a6;
	font-weight: 700;
}

.umw-req { color: #d63638; }

.mikrotik-umw-pro-badge {
	display: inline-block;
	background: #15b8a6;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 2px 8px;
	border-radius: 4px;
	vertical-align: middle;
}

.mikrotik-umw-test-result {
	margin-left: 10px;
	font-weight: 600;
}
.mikrotik-umw-test-result.is-testing { color: #646970; }
.mikrotik-umw-test-result.is-ok { color: #15803d; }
.mikrotik-umw-test-result.is-error { color: #b32d2e; }

/* Profiles table */
.mikrotik-umw-table { max-width: 980px; margin-top: 8px; }
.mikrotik-umw-table th { font-weight: 600; }

.mikrotik-umw-pro-banner {
	max-width: 980px;
	margin-top: 18px;
	padding: 16px 18px;
	border: 1px solid #c6e9e4;
	border-radius: 8px;
	background: #f4fbfa;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.mikrotik-umw-pro-banner p { margin: 0; flex: 1 1 360px; font-size: 13px; }

/* Comparison table */
.mikrotik-umw-compare { max-width: 760px; margin-top: 8px; }
.mikrotik-umw-compare .umw-col { text-align: center; width: 90px; }
.mikrotik-umw-compare .umw-col-pro { background: #f4fbfa; }
.mikrotik-umw-compare .umw-yes { color: #15b8a6; font-weight: 700; }
.mikrotik-umw-compare .umw-no { color: #a7aaad; }

.mikrotik-umw-cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Pro feature grid */
.mikrotik-umw-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	max-width: 900px;
	margin: 16px 0 26px;
}
.mikrotik-umw-feature {
	border: 1px solid var(--line);
	border-left: 4px solid var(--teal);
	border-radius: 10px;
	padding: 12px 16px;
	background: #fff;
}
.mikrotik-umw-feature h3 { margin: 0 0 4px; font-size: 14px; color: #0A151D; }
.mikrotik-umw-feature p { margin: 0; font-size: 13px; color: #43525b; line-height: 1.55; }
.mikrotik-umw-compare-title { font-size: 16px; margin: 6px 0 2px; }

.mikrotik-umw-procount {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #15B8A6;
	text-transform: uppercase;
}
.mikrotik-umw-procount-big {
	display: inline-block;
	margin: 2px 0 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: #f4fbfa;
	border: 1px solid #c6e9e4;
	font-weight: 700;
	color: #0f766e;
}

/* Setup guide */
.mikrotik-umw-steps { max-width: 820px; counter-reset: umwstep; list-style: none; padding: 0; margin: 10px 0; }
.mikrotik-umw-steps > li {
	position: relative; padding: 10px 0 14px 44px; border-bottom: 1px solid var(--line);
}
.mikrotik-umw-steps > li:last-child { border-bottom: 0; }
.mikrotik-umw-steps > li::before {
	counter-increment: umwstep; content: counter(umwstep);
	position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 50%;
	background: var(--teal); color: #fff; font-weight: 700; display: grid; place-items: center;
}
.mikrotik-umw-steps h3 { margin: 2px 0 6px; font-size: 14px; }
.mikrotik-umw-steps p { margin: 4px 0; font-size: 13.5px; color: #3a4850; }
.mikrotik-umw-code {
	display: block; background: #0A151D; color: #d7e6ee; padding: 10px 13px; border-radius: 8px;
	font-family: Consolas, Menlo, monospace; font-size: 12.5px; line-height: 1.6; overflow: auto; margin: 6px 0;
	white-space: pre; direction: ltr; text-align: left;
}

@media screen and ( max-width: 782px ) {
	.mikrotik-umw-features { grid-template-columns: 1fr; }
}

/* Users monitor */
.mikrotik-umw-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	max-width: 760px;
	margin: 14px 0 18px;
}
.mikrotik-umw-stat {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 14px 16px;
	text-align: center;
}
.mikrotik-umw-stat .num { display: block; font-size: 24px; font-weight: 700; color: #0A151D; line-height: 1.1; }
.mikrotik-umw-stat .lbl { display: block; margin-top: 4px; font-size: 12px; color: #54646d; }

.mikrotik-umw-users-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
}
.mikrotik-umw-users-controls #mikrotik-umw-user-search { min-width: 240px; }
.mikrotik-umw-usage-note { font-size: 12.5px; color: #0f766e; }

.mikrotik-umw-used { font-variant-numeric: tabular-nums; }

@media screen and ( max-width: 782px ) {
	.mikrotik-umw-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Product panel */
.mikrotik-umw-panel .mikrotik-umw-panel-head {
	padding: 12px;
	border-left: 4px solid #15b8a6;
	background: #f6fefd;
	margin: 10px 12px 0;
}
.mikrotik-umw-panel-status { font-size: 12px; }
.umw-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.umw-dot-ok { background: #15b8a6; }
.umw-dot-off { background: #dba617; }

.mikrotik-umw-locked {
	opacity: 0.6;
	pointer-events: none;
	padding: 6px 12px;
}

.mikrotik-umw-panel-cta {
	padding: 0 12px 12px;
	display: flex;
	gap: 14px;
	align-items: center;
}

@media screen and ( max-width: 782px ) {
	.mikrotik-umw-grid { flex-direction: column; }
	.mikrotik-umw-aside { flex-basis: auto; width: 100%; }
}