@import url("defaultcss.css");

/* Tunnel Manager module visual treatment. */
.header-container {
	background-color: var(--bos-topbar-bg, #127698);
}

.tm-topbar {
	background: var(--bos-topbar-bg, #127698);
}

.tm-topbar ul {
	list-style: none;
	margin: 0;
	padding: 6px 12px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-height: 34px;
}

.tm-topbar li {
	margin: 0;
	padding: 0;
	color: #fff;
}

.tm-topbar a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 2px 8px;
}

.tm-topbar .tm-top-button {
	background: var(--bos-nav-button-bg, #fff);
	border: 1px solid rgba(255,255,255,.65);
	border-radius: 6px;
	color: var(--bos-nav-button-text, #101828);
	font-weight: bold;
	padding: 7px 13px;
	box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

.tm-topbar a:hover {
	background: rgba(255,255,255,.14);
	border-radius: 4px;
}

.tm-topbar .tm-top-button:hover {
	background: var(--bos-nav-button-hover, #eef4ff);
	color: var(--bos-nav-button-text, #101828);
}

.tm-top-first {
	margin-left: auto;
}

.tm-license-warning {
	color: #ffd7d7;
	font-weight: bold;
}

.tm-brandbar {
	background: var(--bos-brandbar-bg, var(--bos-panel-bg, #fff));
	border-bottom: 1px solid var(--bos-brandbar-border, var(--bos-border, #d7dde5));
	padding: 18px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.tm-brandbar a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--bos-text, #101828);
	text-decoration: none;
}

.tm-brand-mark {
	display: inline-grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 6px;
	border: 1px solid var(--bos-accent-border, #7dd3fc);
	background: var(--bos-accent-soft, #e0f2fe);
	color: var(--bos-accent-text, #0e7490);
	font-weight: 800;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.tm-brand-text {
	display: grid;
	gap: 3px;
	font-size: 16px;
	line-height: 1.1;
	color: var(--bos-muted-text, #667085);
}

.tm-brand-text strong {
	color: var(--bos-text, #101828);
	font-size: 32px;
	line-height: 1.1;
}

.tm-brand-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.tm-env-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 999px;
	border: 1px solid var(--bos-border, #cfd6df);
	background: var(--bos-panel-bg, #fff);
	color: var(--bos-text, #101828);
	padding: 7px 9px;
	box-shadow: var(--bos-shadow-soft, 0 1px 2px rgba(0,0,0,.05));
	font: 11px/1.1 Verdana;
	font-weight: bold;
	text-transform: uppercase;
}

.tm-env-mode {
	border-radius: 999px;
	padding: 5px 8px;
}

.tm-env-source {
	color: var(--bos-muted-text, #667085);
	white-space: nowrap;
}

.tm-env-lab {
	border-color: #7dd3fc;
	background: #e0f2fe;
}

.tm-env-lab .tm-env-mode {
	background: #0284c7;
	color: #fff;
}

.tm-env-lab .tm-env-source {
	color: #075985;
}

.tm-env-prod {
	border-color: #fca5a5;
	background: #fee2e2;
}

.tm-env-prod .tm-env-mode {
	background: #dc2626;
	color: #fff;
}

.tm-env-prod .tm-env-source {
	color: #991b1b;
}

html[data-bos-theme="dark"] .tm-env-lab {
	border-color: #1f78a5;
	background: #0f2d3d;
}

html[data-bos-theme="dark"] .tm-env-lab .tm-env-source {
	color: #9bdcff;
}

html[data-bos-theme="dark"] .tm-env-prod {
	border-color: #9f3030;
	background: #3d1515;
}

html[data-bos-theme="dark"] .tm-env-prod .tm-env-source {
	color: #ffb4b4;
}

.tm-header-tools {
	position: relative;
	display: inline-block;
}

.tm-header-tools summary {
	list-style: none;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1px solid var(--bos-border, #cfd6df);
	background: var(--bos-panel-bg, #fff);
	color: var(--bos-text, #101828);
	cursor: pointer;
	box-shadow: var(--bos-shadow-soft, 0 1px 2px rgba(0,0,0,.05));
}

.tm-header-tools summary::-webkit-details-marker {
	display: none;
}

.tm-header-tools summary:hover,
.tm-header-tools[open] summary {
	background: var(--bos-nav-button-hover, #eef4ff);
	border-color: var(--bos-focus, #8fb7f2);
}

.tm-header-tools-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 7px);
	z-index: 50;
	min-width: 178px;
	display: grid;
	gap: 4px;
	padding: 7px;
	border: 1px solid var(--bos-border, #d7dde5);
	border-radius: 6px;
	background: var(--bos-panel-bg, #fff);
	box-shadow: 0 12px 26px rgba(15,23,42,.18);
}

.tm-header-tools-menu a,
.tm-header-tools-menu button {
	display: block;
	width: 100%;
	padding: 8px 9px;
	border-radius: 4px;
	color: var(--bos-text, #101828);
	background: transparent;
	border: 1px solid transparent;
	text-decoration: none;
	font-size: 12px;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.tm-header-tools-menu a:hover,
.tm-header-tools-menu button:hover,
.tm-header-tools-menu button[aria-pressed="true"] {
	background: var(--bos-nav-button-hover, #eef4ff);
	border-color: var(--bos-focus, #8fb7f2);
}

.tm-header-tools-menu button[aria-pressed="true"] {
	font-weight: bold;
}

.tm-header-tools-menu hr {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--bos-border, #d7dde5);
	margin: 3px 0;
}

.tm-header-tools-label {
	color: var(--bos-muted-text, #667085);
	font-size: 11px;
	font-weight: bold;
	line-height: 1.1;
	padding: 3px 2px 1px;
	text-transform: uppercase;
}

.tm-header-tools-theme-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

.tm-header-tools-theme-grid button {
	text-align: center;
}

.tm-header-tools-theme-grid button[data-bos-accent-option="cloud"] {
	background: #e0f2fe;
	border-color: #7dd3fc;
	color: #0e7490;
}

.tm-header-tools-theme-grid button[data-bos-accent-option="forest"] {
	background: #e3f2ef;
	border-color: #9bc9c2;
	color: #356b66;
}

.tm-header-tools-theme-grid button[data-bos-accent-option="violet"] {
	background: #eeeaf5;
	border-color: #bcb1d1;
	color: #625485;
}

.tm-header-tools-theme-grid button[data-bos-accent-option="ember"] {
	background: #ffedd5;
	border-color: #fdba74;
	color: #c2410c;
}

.tm-header-tools-theme-grid button[data-bos-accent-option="steel"] {
	background: #e8edf2;
	border-color: #a7b1be;
	color: #334155;
}

.tm-header-tools-theme-grid button[data-bos-accent-option="ruby"] {
	background: #f7e8ec;
	border-color: #d7a1ad;
	color: #874254;
}

.tm-header-tools-theme-grid button[data-bos-accent-option="gold"] {
	background: #f3ecd9;
	border-color: #cbb47c;
	color: #7d6129;
}

html[data-bos-theme="dark"] .tm-header-tools-theme-grid button[data-bos-accent-option="cloud"] {
	background: #164e63;
	border-color: #0891b2;
	color: #cffafe;
}

html[data-bos-theme="dark"] .tm-header-tools-theme-grid button[data-bos-accent-option="forest"] {
	background: #223f3d;
	border-color: #4f8f87;
	color: #c9e7e2;
}

html[data-bos-theme="dark"] .tm-header-tools-theme-grid button[data-bos-accent-option="violet"] {
	background: #3a3349;
	border-color: #74649b;
	color: #e4def0;
}

html[data-bos-theme="dark"] .tm-header-tools-theme-grid button[data-bos-accent-option="ember"] {
	background: #431407;
	border-color: #c2410c;
	color: #fed7aa;
}

html[data-bos-theme="dark"] .tm-header-tools-theme-grid button[data-bos-accent-option="steel"] {
	background: #263241;
	border-color: #6f7e91;
	color: #e2e8f0;
}

html[data-bos-theme="dark"] .tm-header-tools-theme-grid button[data-bos-accent-option="ruby"] {
	background: #3f2630;
	border-color: #a84f63;
	color: #f0d5dc;
}

html[data-bos-theme="dark"] .tm-header-tools-theme-grid button[data-bos-accent-option="gold"] {
	background: #3a321f;
	border-color: #9d7a34;
	color: #eadbb4;
}

.tm-header-tools-theme-grid button[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px currentColor;
}

.tm-onboarding-nav {
	background: var(--bos-panel-soft-bg, #fafbfc);
	border-bottom: 1px solid var(--bos-border, #d7dde5);
	padding: 9px 12px;
}

.tm-onboarding-nav-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.tm-onboarding-nav-home,
.tm-onboarding-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--bos-border, #d7dde5);
	border-radius: 6px;
	background: var(--bos-panel-bg, #fff);
	color: var(--bos-text, #101828);
	text-decoration: none;
	padding: 8px 10px;
	box-shadow: var(--bos-shadow-soft, 0 1px 2px rgba(0,0,0,.05));
	font-size: 12px;
	line-height: 1.1;
}

.tm-onboarding-nav-home {
	font-weight: bold;
	border-color: #8fb7f2;
}

.tm-onboarding-nav-link span {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: #e0f2fe;
	color: #075985;
	font-weight: bold;
}

.tm-onboarding-nav-link strong {
	color: var(--bos-text, #101828);
	font-size: 12px;
	white-space: nowrap;
}

.tm-onboarding-nav-link:hover,
.tm-onboarding-nav-home:hover {
	background: var(--bos-nav-button-hover, #eef4ff);
	border-color: var(--bos-focus, #8fb7f2);
}

.tm-onboarding-nav-active {
	border-color: #2e90fa;
	background: #eef6ff;
}

.tm-onboarding-nav-active span {
	background: #2e90fa;
	color: #fff;
}

html[data-bos-theme="dark"] .tm-onboarding-nav-active {
	background: #102a43;
	border-color: #1d4e89;
}

.home {
	max-width: 420px;
	margin: 30px auto;
	background: var(--bos-panel-bg, #fff);
	border: 1px solid var(--bos-border, #d7dde5);
	border-radius: 6px;
	padding: 18px 20px;
	box-shadow: var(--bos-shadow-soft, 0 1px 2px rgba(0,0,0,.05));
	color: var(--bos-text, #101828);
}

.home p {
	color: var(--bos-text, #101828);
	font-size: 13px;
	line-height: 1.4;
}

.home h4 {
	margin: 0 0 14px 0;
	color: var(--bos-text, #101828);
	font-size: 22px;
	line-height: 1.2;
}

.home input[type="text"],
.home input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	background: var(--bos-input-bg, #fff);
	color: var(--bos-input-text, #101828);
	border: 1px solid var(--bos-border, #cfd6df);
	border-radius: 4px;
	padding: 8px 9px;
	margin-top: 4px;
}

.home input[type="button"] {
	background: var(--bos-topbar-bg, #127698);
	color: #fff;
	border: 1px solid var(--bos-topbar-bg, #127698);
	border-radius: 6px;
	padding: 8px 13px;
	font-weight: bold;
	cursor: pointer;
}

.home a {
	color: #1d66b2;
}

.nav-container {
	background-color: var(--bos-nav-bg, var(--bos-topbar-bg, #127698));
	border-top: 1px solid var(--bos-brandbar-border, var(--bos-border, #d7dde5));
	border-bottom: 1px solid var(--bos-brandbar-border, var(--bos-border, #d7dde5));
	padding: 6px 8px;
}

.nav-container nav a {
	text-decoration: none;
	font: 12px/1.15 Verdana;
	color: var(--bos-nav-button-text, #101828);
	display: block;
	background: var(--bos-nav-button-bg, #fff);
	border: 1px solid var(--bos-border, #cfd6df);
	border-radius: 6px;
	padding: 7px 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.nav-container nav a:hover {
	background-color: var(--bos-nav-button-hover, #eef4ff);
	border-color: var(--bos-focus, #8fb7f2);
}

.nav-container nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: transparent;
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

.nav-container nav ul li {
	margin: 0;
	padding: 0;
}

.nav-container nav > ul > li {
	float: none;
	position: relative;
}

.nav-container nav > ul > li > a {
	display: block;
}

.nav-container nav ul li ul {
	position: absolute;
	background: var(--bos-panel-bg, #fff);
	margin: 0;
	padding: 6px;
	display: none;
	min-width: 190px;
	border: 1px solid var(--bos-border, #d7dde5);
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(16,24,40,.12);
	z-index: 1000;
	top: 100%;
	left: 0;
}

.nav-container nav ul li ul li {
	text-align: left;
	width: 100%;
}

.nav-container nav ul li ul a {
	padding: 7px 9px;
	box-shadow: none;
}

.nav-container nav ul li:hover > ul,
.nav-container nav ul li:focus-within > ul {
	display: grid;
	gap: 4px;
}

.nav-container .tm-nav-help {
	margin-left: auto;
}

.nav-container .tm-nav-help button {
	font: 12px/1.15 Verdana;
	color: var(--bos-nav-button-text, #101828);
	background: var(--bos-nav-button-bg, #fff);
	border: 1px solid var(--bos-border, #cfd6df);
	border-radius: 6px;
	padding: 7px 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	cursor: pointer;
}

.nav-container .tm-nav-help button:hover {
	background-color: var(--bos-nav-button-hover, #eef4ff);
	border-color: var(--bos-focus, #8fb7f2);
}

.tm-board h4,
.tm-provider-board h4,
.tm-edit-board h4,
.tm-panel h4 {
	font-size: 20px;
	line-height: 1.2;
	font-weight: bold;
}