/*
 * Componentes visuais reaproveitáveis inspirados no SilpiV2.
 * Todas as regras vivem dentro de .sv2 e usam nomes de classe
 * prefixados com "sv2-" para nunca colidir com .btn/.card/.table/
 * .modal/.nav-pills nativos do Bootstrap usados no resto do sistema.
 */

.sv2 * {
	box-sizing: border-box;
}

/* Cards */
.sv2 .sv2-card {
	background: var(--sv2-card-bg);
	border: 1px solid var(--sv2-border);
	border-radius: var(--sv2-radius-2xl);
	box-shadow: var(--sv2-shadow-card);
	margin-bottom: 20px;
}
.sv2 .sv2-card-body {
	padding: 20px;
}

/* Ícone circular */
.sv2 .sv2-icon-circle {
	width: 44px;
	height: 44px;
	border-radius: var(--sv2-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.sv2 .sv2-icon-circle.sv2-icon-circle-primary {
	background: var(--sv2-primary-lightest);
	color: var(--sv2-primary);
}
.sv2 .sv2-icon-circle.sv2-icon-circle-destructive {
	background: var(--sv2-destructive-light);
	color: var(--sv2-destructive);
}

/* Alerta (banner de atrasados) */
.sv2 .sv2-alert {
	border-color: var(--sv2-destructive-light);
	background: linear-gradient(0deg, var(--sv2-destructive-light), var(--sv2-destructive-light));
}
.sv2 .sv2-alert .sv2-card-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.sv2 .sv2-alert-content {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.sv2 .sv2-alert-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--sv2-destructive);
	margin: 0;
}
.sv2 .sv2-alert-subtitle {
	font-size: 13px;
	color: var(--sv2-muted);
	margin: 4px 0 0;
}
/* Variante de atenção (algo vai vencer/precisa de ação em breve) */
.sv2 .sv2-alert.sv2-alert-warning {
	border-color: var(--sv2-warning-light);
	background: var(--sv2-warning-light);
}
.sv2 .sv2-alert.sv2-alert-warning .sv2-alert-title {
	color: #8a5a00;
}
.sv2 .sv2-icon-circle.sv2-icon-circle-warning {
	background: #fff;
	color: var(--sv2-warning);
}

/* Header da página */
.sv2 .sv2-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	margin-bottom: 20px;
}
.sv2 .sv2-header h1 {
	font-size: 22px;
	font-weight: 600;
	margin: 0;
	color: var(--sv2-foreground);
}
.sv2 .sv2-header p {
	font-size: 13px;
	color: var(--sv2-muted);
	margin: 2px 0 0;
}

/* Tabs em pílula */
.sv2 .sv2-tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--sv2-muted-bg);
	border-radius: var(--sv2-radius-full);
	margin-bottom: 20px;
	list-style: none;
}
.sv2 .sv2-tab {
	border: none;
	background: transparent;
	padding: 8px 18px;
	border-radius: var(--sv2-radius-full);
	font-size: 13px;
	font-weight: 600;
	color: var(--sv2-foreground);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	display: inline-block;
}
.sv2 .sv2-tab:hover {
	color: var(--sv2-foreground);
	background: rgba(0, 0, 0, 0.04);
	text-decoration: none;
}
.sv2 .sv2-tab.sv2-tab-active,
.sv2 .sv2-tab.sv2-tab-active:hover {
	background: var(--sv2-primary-hover) !important;
	color: #fff !important;
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Campos de formulário */
.sv2 .sv2-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}
.sv2 .sv2-field {
	margin-bottom: 16px;
}
.sv2 .sv2-label {
	display: block;
	font-size: 12px;
	color: var(--sv2-muted);
	margin-bottom: 6px;
	font-weight: 500;
}
.sv2 .sv2-input,
.sv2 .sv2-field .form-control {
	width: 100%;
	height: 40px;
	border: 1px solid var(--sv2-border);
	border-radius: var(--sv2-radius-xl);
	padding: 0 12px;
	font-size: 13px;
	color: var(--sv2-foreground);
	background: #fff;
	box-shadow: none;
}
/* sp-lookup (angular/directives/lookup) é compartilhado com telas legadas e mantém o hint
   "Aperte F8 para buscar" lá; nas telas sv2 ele desalinha o layout e é escondido aqui. */
.sv2 .template-pesquisa-informacao {
	display: none;
}
.sv2 .sv2-input:focus,
.sv2 .sv2-field .form-control:focus {
	outline: none;
	border-color: var(--sv2-primary);
	box-shadow: 0 0 0 3px var(--sv2-primary-lightest);
}
.sv2 .sv2-input-icon-wrap {
	position: relative;
}
.sv2 .sv2-input-icon-wrap .sv2-input {
	padding-left: 34px;
}
.sv2 .sv2-input-icon-wrap .sv2-input-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sv2-muted);
	font-size: 13px;
}
.sv2 .sv2-help-text {
	font-size: 11px;
	color: var(--sv2-muted);
	margin-top: 4px;
}

/* Estado inválido (has-error) — as diretivas de validação (dc-not-empty, dc-char-counter etc,
   ver angular/directives/validation/validations.js) sobem até o ancestral mais próximo que seja
   .form-group OU .sv2-field e alternam a classe "has-error" nele. O destaque visual em si, porém,
   só existia pra ".form-control" (Geral.css ".has-error .form-control"), que nenhuma tela sv2 usa
   mais — sem esta regra o campo fica sem indicação nenhuma quando inválido, mesmo com a mensagem
   de erro aparecendo embaixo.
   !important necessário: componentes.css tem "input, select, textarea { border: 1px solid
   #e2dfdf !important; ... }" genérico (mesma classe de regra global documentada nos comentários
   do .sv2-checkbox acima) que, sem isso, ganha da nossa border-color independente de
   especificidade. */
.sv2 .has-error .sv2-input {
	border-color: var(--sv2-destructive) !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !important;
}
.sv2 .has-error .sv2-input:focus {
	border-color: var(--sv2-destructive) !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 3px var(--sv2-destructive-light) !important;
}
.sv2 .sv2-filter-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--sv2-border);
	flex-wrap: wrap;
}

/* Filtro avançado (painel estilo popover) */
.sv2 .sv2-adv-filter {
	position: relative;
	margin-right: auto;
}
.sv2 .sv2-adv-filter-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	width: 360px;
	max-width: 90vw;
	background: var(--sv2-card-bg);
	border: 1px solid var(--sv2-border);
	border-radius: var(--sv2-radius-2xl);
	box-shadow: var(--sv2-shadow-card);
	padding: 18px;
}
.sv2 .sv2-adv-filter-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 2px;
	color: var(--sv2-foreground);
}
.sv2 .sv2-adv-filter-desc {
	font-size: 12px;
	color: var(--sv2-muted);
	margin: 0 0 12px;
}
.sv2 .sv2-radio-cards {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: var(--sv2-muted-bg);
	border-radius: var(--sv2-radius-full);
	margin-bottom: 14px;
}
.sv2 .sv2-radio-card {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-radius: var(--sv2-radius-full);
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sv2-foreground);
	cursor: pointer;
	margin: 0;
	text-align: center;
	white-space: nowrap;
}
.sv2 .sv2-radio-card input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.sv2 .sv2-radio-card-active {
	background: var(--sv2-primary);
	color: #fff;
}
.sv2 .sv2-preset-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 4px;
}
.sv2 .sv2-btn-sm {
	height: 30px;
	padding: 0 12px;
	font-size: 12px;
}
.sv2 .sv2-adv-filter-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--sv2-border);
}
.sv2 .sv2-range-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--sv2-primary-lighter);
	background: var(--sv2-primary-lightest);
	border-radius: var(--sv2-radius-xl);
	font-size: 13px;
	color: var(--sv2-foreground);
}
.sv2 .sv2-range-pill span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sv2 .sv2-range-pill-clear {
	margin-left: auto;
	flex-shrink: 0;
	border: none;
	background: transparent;
	color: var(--sv2-muted);
	cursor: pointer;
	padding: 2px;
}
.sv2 .sv2-range-pill-clear:hover {
	color: var(--sv2-foreground);
}

/* Botões */
.sv2 .sv2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border-radius: var(--sv2-radius-full);
	font-size: 13px;
	font-weight: 500;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1;
}
.sv2 .sv2-btn:focus {
	outline: none;
}
.sv2 .sv2-btn-primary {
	background: var(--sv2-primary);
	color: #fff;
}
.sv2 .sv2-btn-primary:hover {
	background: var(--sv2-primary-hover);
	color: #fff;
}
.sv2 .sv2-btn-outline {
	background: #fff;
	border-color: var(--sv2-border);
	color: var(--sv2-foreground);
}
.sv2 .sv2-btn-outline:hover {
	background: var(--sv2-muted-bg);
	color: var(--sv2-foreground);
}
.sv2 .sv2-btn-danger {
	background: var(--sv2-destructive);
	color: #fff;
}
.sv2 .sv2-btn-danger:hover {
	background: #b93030;
	color: #fff;
}
.sv2 .sv2-btn-danger-outline {
	background: #fff;
	border-color: var(--sv2-destructive-light);
	color: var(--sv2-destructive);
}
.sv2 .sv2-btn-danger-outline:hover {
	background: var(--sv2-destructive-light);
	color: var(--sv2-destructive);
}
.sv2 .sv2-btn-ghost {
	background: transparent;
	color: var(--sv2-foreground);
}
.sv2 .sv2-btn-ghost:hover {
	background: var(--sv2-muted-bg);
}
.sv2 .sv2-btn[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

/* Botão de ícone circular (ex.: baixar ficha) */
.sv2 .sv2-icon-btn {
	width: 32px;
	height: 32px;
	border-radius: var(--sv2-radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sv2-primary);
	background: transparent;
	border: none;
	cursor: pointer;
}
.sv2 .sv2-icon-btn:hover {
	background: var(--sv2-primary-lightest);
}

/* Badges / pills */
.sv2 .sv2-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--sv2-radius-full);
	white-space: nowrap;
}
.sv2 .sv2-badge-muted {
	background: var(--sv2-primary-lightest);
	color: var(--sv2-primary-hover);
}
.sv2 .sv2-badge-warning {
	background: var(--sv2-warning-light);
	color: #96650a;
}
.sv2 .sv2-badge-destructive {
	background: var(--sv2-destructive-light);
	color: var(--sv2-destructive);
}
.sv2 .sv2-badge-success {
	background: var(--sv2-success-light);
	color: #1f7a38;
}
.sv2 .sv2-badge-info {
	background: var(--sv2-info-light);
	color: var(--sv2-info);
}
.sv2 td .sv2-badge-warning,
.sv2 td .sv2-badge-destructive,
.sv2 td .sv2-badge-success {
	margin-left: 8px;
}

/* Tabela */
.sv2 .sv2-table-wrap {
	overflow-x: auto;
}
.sv2 .sv2-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.sv2 .sv2-table-wrap table thead th {
	background: var(--sv2-muted-bg);
	color: var(--sv2-foreground);
	font-weight: 600;
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--sv2-border);
	white-space: nowrap;
}
.sv2 .sv2-table-wrap table tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--sv2-border);
	vertical-align: middle;
	color: var(--sv2-foreground);
}
.sv2 .sv2-table-wrap table tbody tr:hover {
	background: var(--sv2-muted-bg);
}
.sv2 .sv2-table-wrap table tbody tr.sv2-row-atrasado {
	background: var(--sv2-destructive-light);
}
.sv2 .sv2-table-wrap table tbody tr.sv2-row-atrasado:hover {
	background: #f6d9d9;
}
.sv2 .sv2-table-wrap table tbody tr.sv2-row-proximo {
	background: var(--sv2-warning-light);
}
.sv2 .sv2-table-wrap table tbody tr.sv2-row-proximo:hover {
	background: #fbe7c1;
}
.sv2 .sv2-table-wrap table input[type="checkbox"] {
	accent-color: var(--sv2-primary);
	width: 16px;
	height: 16px;
}

/* Checkbox pequeno reutilizável - usar via class="sv2-checkbox" no <input type="checkbox">.
   Não depende de accent-color (suporte inconsistente entre navegadores pra tamanho/raio),
   usa appearance:none + pseudo-elementos pra controle visual total. */
.sv2 .sv2-checkbox {
	/* !important necessário: telas legadas costumam ter regras globais tipo
	   "input[type=checkbox]{height:30px!important}" ou "input,select,textarea
	   {padding:...!important}" que, sem isso, ganhariam de qualquer seletor
	   normal independente de especificidade. */
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	/* estrutura/inputs.css tem um "input { border: 1px solid ...; background: #fafafa }"
	   genérico que pinta o próprio elemento nativo. O ::before cobre a caixa com
	   cantos arredondados, mas essa borda quadrada nativa ficava visível "vazando"
	   exatamente nos cantos onde o arredondamento não cobre — daí o efeito de
	   canto sobreposto. Zeramos os dois aqui pra sobrar só o nosso ::before. */
	border: none !important;
	background: transparent !important;
	flex-shrink: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
	cursor: pointer;
	vertical-align: middle;
}
.sv2 .sv2-checkbox::before {
	/* !important em tudo aqui: componentes.css tem um "input[type=checkbox]:before"
	   global (feito pra caixa de 30px) que, por ironia, é MAIS específico que
	   ".sv2-checkbox::before" (seletor de atributo conta mais que classe). Sem
	   !important em cada propriedade, o resultado final vira um Frankenstein —
	   nossa caixa de 20px por fora, com a cor de fundo e a geometria do "✓"
	   vindas do global (feitas pra 30px), estourando o canto da caixa menor. */
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 20px !important;
	height: 20px !important;
	box-sizing: border-box !important;
	background-color: #fff !important;
	border: 1.5px solid var(--sv2-border) !important;
	border-radius: var(--sv2-radius-sm) !important;
	transition: background-color .15s ease, border-color .15s ease;
}
.sv2 .sv2-checkbox:checked::before {
	/* Redeclara border-radius (não só a cor): "input[type=checkbox]:checked:before"
	   em componentes.css empata no nível de classe/pseudo-classe com este seletor
	   e ganha no desempate por ter um seletor de tipo (input) a mais — só bate
	   nosso 6px se a gente também declarar aqui, no seletor :checked. */
	background-color: var(--sv2-primary) !important;
	border-color: var(--sv2-primary) !important;
	border-radius: var(--sv2-radius-sm) !important;
}
.sv2 .sv2-checkbox:checked::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 3px !important;
	left: 7px !important;
	width: 6px !important;
	height: 10px !important;
	box-sizing: border-box !important;
	border: solid #fff !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
}
.sv2 .sv2-checkbox:focus-visible::before {
	box-shadow: 0 0 0 3px var(--sv2-primary-lightest);
}
.sv2 .sv2-checkbox:disabled {
	cursor: not-allowed;
	opacity: .55;
}

/* Barra de ações fixa no rodapé */
.sv2 .sv2-footer-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px 32px;
	background: var(--sv2-card-bg);
	border-top: 1px solid var(--sv2-border);
	box-shadow: var(--sv2-shadow-card);
}

/* Processando */
.sv2 .sv2-processing {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sv2-primary);
	font-size: 13px;
	padding: 12px 0;
}

/* Paginação (usar via <sp-paginacao-sv2 pagination="pagination">) */
.sv2 .sv2-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}
.sv2 .sv2-pagination-info {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--sv2-muted);
}
.sv2 .sv2-pagination-select-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}
.sv2 .sv2-pagination-select-label {
	font-size: 12px;
	color: var(--sv2-muted);
	white-space: nowrap;
}
.sv2 .sv2-pagination-select {
	/* estrutura/inputs.css define "select { width: 90% }" global — sem isso
	   o select herda essa largura em %, que dentro de um flex item de
	   largura automática (.sv2-pagination-info) resolve pra praticamente
	   invisível. */
	width: auto;
	height: 34px;
	margin: 0;
	vertical-align: middle;
	line-height: 32px;
	border: 1px solid var(--sv2-border);
	border-radius: var(--sv2-radius-md);
	padding: 0 8px;
	font-size: 13px;
	color: var(--sv2-foreground);
	background: #fff;
}
.sv2 .sv2-pagination-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	flex-wrap: wrap;
}
.sv2 .sv2-pagination-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: var(--sv2-radius-full);
	border: 1px solid var(--sv2-border);
	background: #fff;
	color: var(--sv2-foreground);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.sv2 .sv2-pagination-btn:hover:not(:disabled) {
	background: var(--sv2-muted-bg);
}
.sv2 .sv2-pagination-btn:disabled {
	opacity: .4;
	cursor: not-allowed;
}
.sv2 .sv2-pagination-btn-active,
.sv2 .sv2-pagination-btn-active:hover {
	background: var(--sv2-primary);
	border-color: var(--sv2-primary);
	color: #fff;
}
.sv2 .sv2-pagination-ellipsis {
	padding: 0 4px;
	color: var(--sv2-muted);
	font-size: 13px;
}

/* Modal (mantém plumbing do Bootstrap, só reestiliza) */
.sv2 .sv2-modal-content {
	border-radius: var(--sv2-radius-2xl);
	border: none;
	box-shadow: var(--sv2-shadow-card);
}
.sv2 .sv2-modal-content .modal-header {
	border-bottom: 1px solid var(--sv2-border);
	padding: 18px 20px;
}
.sv2 .sv2-modal-content .modal-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--sv2-foreground);
}
.sv2 .sv2-modal-content .modal-body {
	padding: 20px;
}
.sv2 .sv2-modal-content .modal-footer {
	border-top: 1px solid var(--sv2-border);
	padding: 14px 20px;
}

/* Ícone de ação de pré-visualizar em tabelas */
.sv2-preview-icon {
	cursor: pointer;
}

/* Lista selecionável de itens (ex.: intercorrências/evoluções a repassar num plantão) —
   card clicável com checkbox, badge, descrição e metadados. Reutilizável em qualquer
   tela que precise de um "marque os itens relevantes de uma lista". */
.sv2 .sv2-select-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}
.sv2 .sv2-select-list-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sv2-foreground);
}
.sv2 .sv2-select-list-toggle {
	background: none;
	border: none;
	color: var(--sv2-primary);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
}
.sv2 .sv2-select-list-toggle:hover {
	text-decoration: underline;
}
.sv2 .sv2-select-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 320px;
	overflow-y: auto;
	padding-right: 2px;
}
.sv2 .sv2-select-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--sv2-border);
	border-radius: var(--sv2-radius-xl);
	cursor: pointer;
	background: #fff;
}
.sv2 .sv2-select-item:hover {
	background: var(--sv2-muted-bg);
}
.sv2 .sv2-select-item-selected,
.sv2 .sv2-select-item-selected:hover {
	background: var(--sv2-primary-lightest);
	border-color: var(--sv2-primary-lighter);
}
.sv2 .sv2-select-item-checkbox {
	margin-top: 2px;
	flex-shrink: 0;
}
.sv2 .sv2-select-item-body {
	flex: 1;
	min-width: 0;
}
.sv2 .sv2-select-item-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sv2-foreground);
}
.sv2 .sv2-select-item-desc {
	font-size: 12px;
	color: var(--sv2-muted);
	margin: 4px 0 0;
}
.sv2 .sv2-select-item-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
	font-size: 11px;
	color: var(--sv2-muted);
}
.sv2 .sv2-select-item-meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.sv2 .sv2-select-list-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 24px;
	border: 1px dashed var(--sv2-border);
	border-radius: var(--sv2-radius-xl);
	color: var(--sv2-muted);
	font-size: 12px;
	text-align: center;
}