/* Отступ сверху для h2: стандартный (0.83em) + 4px */
h2 {
	margin-top: calc(0.83em + 4px);
}

:root {
	/* Brand cyan */
	--cyan: #0290b2;
	--cyan-hover: #027a97;
	--cyan-dark: #01657d;
	--cyan-light: #d9eef3;

	/*
	 * Metro internal variable is --color-cyan (used e.g. by slider).
	 * We override it here so Metro components also pick up brand cyan.
	 */
	--color-cyan: var(--cyan);
}

/* Metro helpers (override Metro's own !important rules) */
.bg-cyan,
.bg-cyan-active:active,
.bg-cyan-hover:hover,
.bg-cyan-focus:focus {
	background-color: var(--cyan) !important;
}

.fg-cyan,
.fg-cyan-active:active,
.fg-cyan-hover:hover,
.fg-cyan-focus:focus {
	color: var(--cyan) !important;
}

.bd-cyan,
.bd-cyan-active:active,
.bd-cyan-hover:hover,
.bd-cyan-focus:focus {
	border-color: var(--cyan) !important;
}

/* Light brand background helper */
.bg-light-cyan,
.bg-light-cyan-active:active,
.bg-light-cyan-hover:hover,
.bg-light-cyan-focus:focus {
	background-color: var(--cyan-light) !important;
}

/* Pseudo-element helpers used across Metro */
.before-bg-cyan::before,
.after-bg-cyan::after {
	background: var(--cyan) !important;
}
.before-fg-cyan::before,
.after-fg-cyan::after {
	color: var(--cyan) !important;
}
.before-bd-cyan::before,
.after-bd-cyan::after {
	border-color: var(--cyan) !important;
}

/* Buttons */
.button-cyan {
	--button-background: var(--cyan);
	--button-color: #fff;
}
.button-cyan.link {
	--button-color: var(--cyan) !important;
}
@media (hover: hover) {
	.button-cyan:hover {
		--button-background: var(--cyan-hover);
		--button-color: #fff;
	}
}
@media (hover: none) {
	.button-cyan:active {
		--button-background: var(--cyan-hover);
		--button-color: #fff;
	}
}

/* primary = cyan (никогда красная) */
button.primary,
.button.primary,
a.button.primary,
button.primary:hover,
.button.primary:hover,
a.button.primary:hover {
	background-color: var(--cyan) !important;
	color: #fff !important;
	border-color: var(--cyan) !important;
}
button.primary:hover,
.button.primary:hover,
a.button.primary:hover {
	background-color: var(--cyan-hover) !important;
	border-color: var(--cyan-hover) !important;
}

/* Simple color block */
.cyan {
	background: var(--cyan) !important;
	color: #ffffff;
}
.cyan .action {
	background: var(--cyan-dark) !important;
	color: #ffffff;
}
@media (hover: hover) {
	.cyan:hover {
		background: var(--cyan-hover) !important;
	}
}
@media (hover: none) {
	.cyan:active {
		background: var(--cyan-hover) !important;
	}
}

/* Form controls (common Metro patterns) */
input[type=checkbox].checkbox-cyan,
input[type=checkbox].checkbox-cyan::before {
	border-color: var(--cyan) !important;
}
input[type=radio].radio-cyan {
	border-color: var(--cyan) !important;
}
input[type=radio].radio-cyan::before {
	background-color: var(--cyan) !important;
	border-color: var(--cyan) !important;
}

/* Metro validator: "required" controls styling
 * Metro adds `.required` class for inputs having `data-validate` with `required`.
 * We want required fields to have cyan dashed border globally (Metro uses dashed; it renders reliably as "пунктир").
 */
:root {
	--input-required-color: var(--cyan);
}

input[type=text].required,
input[type=password].required,
input[type=email].required,
input[type=date].required,
input[type=datetime-local].required,
input[type=search].required,
input[type=tel].required,
input[type=time].required,
input[type=url].required,
input[type=week].required,
textarea.required,
select.required,
.metro-input.required,
.file.required,
.input.required,
.textarea.required,
.select.required,
.tag-input.required,
.spinner.required,
.color-picker.required {
	border: 1px var(--input-required-color) dashed !important;
}

/* Sidenav (Metro UI) tweaks for our left menu */
/* - remove separators (lines) completely */
/* - make each menu item occupy full available width */
.sidenav.no-sidenav-separators {
	width: 100% !important;
	padding: 0 !important;
	/* Also neutralize Metro width variables used for compact/expanded mode */
	--sidenav-width: 100%;
	--sidenav-width-compact: 100%;
	/* Active state: без фона, только цвет иконки */
	--sidenav-background-active: transparent;
	--sidenav-color-active: var(--cyan-dark);
}

.sidenav.no-sidenav-separators li {
	margin: 0 !important;
}

.sidenav.no-sidenav-separators li + li {
	border-top: none !important;
}

.sidenav.no-sidenav-separators a,
.sidenav.no-sidenav-separators.expanded a {
	width: 100% !important;
	box-sizing: border-box;
	border-radius: 0 !important;
}

.sidenav.no-sidenav-separators li.active .icon {
	color: var(--cyan-dark) !important;
}
/* Сохраняем цвет статуса иконки домена при активном пункте */
.sidenav.no-sidenav-separators li.active .icon.fg-green {
	color: hsl(120, 100%, 35%) !important;
}
.sidenav.no-sidenav-separators li.active .icon.fg-orange {
	color: hsl(39, 100%, 50%) !important;
}
.sidenav.no-sidenav-separators li.active .icon.fg-red {
	color: hsl(0, 100%, 50%) !important;
}

.sidenav.no-sidenav-separators .d-menu,
.sidenav.no-sidenav-separators.expanded .d-menu {
	border-bottom: none !important;
}

.sidenav.no-sidenav-separators.expanded .d-menu li:not(:first-child) {
	border-top: none !important;
}

/* Кликабельный заголовок без иконки и отступов ссылки */
.sidenav .title a.sidenav-title-link {
	text-decoration: none;
	color: inherit;
	padding: 20px 10px;
}
.sidenav .title a.sidenav-title-link:hover {
	text-decoration: none;
	color: inherit;
}
.sidenav .title a.sidenav-title-link .icon {
	display: none;
}

/* Metro h-menu: allow right alignment when using .text-right */
ul.h-menu.text-right,
.h-menu.text-right {
	justify-content: flex-end !important;
	width: 100%;
}

/* Domains menu: push "Настройки" to the right */
.h-menu > li.menu-right {
	margin-left: auto !important;
}

/* Hover highlight in brand light-cyan */
ul.h-menu.text-right,
.h-menu.text-right {
	--h-menu-item-hover-background: var(--cyan-light);
	--h-menu-item-hover-color: var(--cyan-dark);
}

/* CalendarPicker: remove extra borders around calendar icon (used in stats period filter) */
.cp-icon-noborder.calendar-picker .button-group .button.input-calendar-button {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.cp-icon-noborder.calendar-picker .button-group .button.input-calendar-button:hover,
.cp-icon-noborder.calendar-picker .button-group .button.input-calendar-button:active,
.cp-icon-noborder.calendar-picker .button-group .button.input-calendar-button:focus {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.cp-icon-noborder.calendar-picker .button-group {
	border-left: 0 !important;
}
.cp-icon-noborder.calendar-picker .input-calendar-button {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

/* Fix dropdown items alignment inside h-menu (Metro uses absolute icon in d-menu) */
.h-menu .d-menu > li > a {
	padding-left: 10px; /* remove reserved space for absolute icon */
}
.h-menu .d-menu > li > a > .icon {
	position: static !important;
	left: auto !important;
	top: auto !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 16px;
}
.h-menu .d-menu > li > a > .caption {
	margin-right: 0; /* Metro reserves space for hotkey; we don't use it */
}

/* Messages table: round status icon with colored border */
.msg-status-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
	line-height: 1;
}
.msg-status-circle .icon {
	margin: 0 !important;
}

/* Messages table: slightly more spacing inside "Письмо" cell */
.msg-mail-to {
	margin-bottom: 2px;
}

/* Tables: remove outer border around the whole table */
table,
.table {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

/* Metro tables: remove border drawn by Metro wrappers / modifiers */
.table.table-border {
	border: 0 !important;
}
.table caption,
.table-container caption {
	border: 0 !important;
}
.table-component .table-container {
	border: 0 !important;
	box-shadow: none !important;
}

/* Tables: tighter header cell vertical padding */
table th,
.table th,
.table .th {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

/* Tabs (pills): акцентная точка активной вкладки — cyan */
.tabs-pack-choice > li.active::before {
	background-color: var(--cyan) !important;
}

/* Страница аккаунта: длинные данные не ломают вёрстку */
.account-data-table-wrapper {
	overflow-x: auto;
	max-width: 100%;
}
.account-data-table-wrapper .table {
	table-layout: fixed;
	width: 100%;
	min-width: 200px;
}
.account-data-table-wrapper .table td:first-child {
	width: 35%;
}
.account-data-cell {
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: break-word;
	max-width: 0;
}
.account-data-cell .account-value {
	vertical-align: middle;
}
.account-edit-icon {
	cursor: pointer;
	margin-left: 0.5rem;
	vertical-align: middle;
	opacity: 0.7;
}
.account-edit-icon:hover {
	opacity: 1;
}
.account-edit-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}
.account-edit-row .account-edit-input {
	flex: 1 1 auto;
	min-width: 120px;
	max-width: 100%;
}
.account-edit-input {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}
.account-input-cell {
	max-width: 100%;
	overflow: hidden;
}
.account-input-cell input {
	box-sizing: border-box;
	max-width: 100%;
}