/* =============================================================================
   DIGITALMIG — DESIGN SYSTEM / TOKENS  (Poli-X SIRCAP)
   -----------------------------------------------------------------------------
   FONTE ÚNICA de cor, botão, tabela responsiva e feedback do sistema.
   Carregado DEPOIS do tema (app.min.css) no LayoutPadrao → vence na cascata.

   >>> Para evoluir a identidade visual, mexa AQUI. Nunca cor/estilo solto no
       template. Botão de salvar deve ter o MESMO tamanho/cor/hover em toda tela.
   ============================================================================= */

:root {
	/* ---- Paleta da marca (teal Poli-X) --------------------------------- */
	--dg-primary: #007072;
	--dg-primary-hover: #005c5e;
	--dg-primary-active: #004a4c;
	--dg-primary-rgb: 0, 112, 114;

	/* ---- Cores de estado ---------------------------------------------- */
	--dg-danger: #d9534f;
	--dg-danger-hover: #c9302c;
	--dg-danger-rgb: 217, 83, 79;
	--dg-success: #28a745;
	--dg-neutral: #6c757d;

	/* ---- Superfícies / apoio ------------------------------------------ */
	--dg-border: #dee2e6;
	--dg-muted: #6c757d;
	--dg-card-shadow: 0 1px 2px rgba(0, 0, 0, .06);

	/* ---- Herança automática para componentes Bootstrap 5 -------------- */
	--bs-primary: var(--dg-primary);
	--bs-primary-rgb: var(--dg-primary-rgb);
	--bs-link-color: var(--dg-primary);
	--bs-link-hover-color: var(--dg-primary-hover);
	--bs-link-color-rgb: var(--dg-primary-rgb);
}

/* =============================================================================
   BOTÕES — cor única (o tema define azul; aqui remapeamos para o teal da marca)
   Vale para TODOS os `btn btn-primary`/`btn-outline-primary` já existentes,
   sem editar nenhum template. Consistência instantânea e centralizada.
   ============================================================================= */

.btn-primary {
	background-color: var(--dg-primary);
	border-color: var(--dg-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:first-child:active,
.show > .btn-primary.dropdown-toggle {
	background-color: var(--dg-primary-hover) !important;
	border-color: var(--dg-primary-hover) !important;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:focus-visible {
	box-shadow: 0 0 0 .15rem rgba(var(--dg-primary-rgb), .35) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
	background-color: var(--dg-primary);
	border-color: var(--dg-primary);
	opacity: .55;
}

.btn-outline-primary {
	color: var(--dg-primary);
	border-color: var(--dg-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
	color: #fff !important;
	background-color: var(--dg-primary) !important;
	border-color: var(--dg-primary) !important;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
	box-shadow: 0 0 0 .15rem rgba(var(--dg-primary-rgb), .35) !important;
}

/* Ações destrutivas (excluir) — vermelho padrão do design system */
.btn-danger {
	background-color: var(--dg-danger);
	border-color: var(--dg-danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
	background-color: var(--dg-danger-hover) !important;
	border-color: var(--dg-danger-hover) !important;
}

/* -----------------------------------------------------------------------------
   .dg-btn — tamanho/alvo de toque PADRÃO (usado pelos fragments de botão).
   Garante o mesmo tamanho em toda tela e bom toque no celular (>= 40px).
   Não afeta botões existentes até adotarem a classe (via fragment).
   ----------------------------------------------------------------------------- */
.dg-btn {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	font-weight: 500;
}

/* =============================================================================
   PAGINAÇÃO — cor da marca (o tema usa azul) + página ativa em teal.
   Usada pelo rodapé padrão das listagens (fragment ui/paginacao :: rodape).
   ============================================================================= */
.pagination {
	--bs-pagination-color: var(--dg-primary);
	--bs-pagination-hover-color: var(--dg-primary-hover);
	--bs-pagination-focus-color: var(--dg-primary-hover);
	--bs-pagination-active-bg: var(--dg-primary);
	--bs-pagination-active-border-color: var(--dg-primary);
	--bs-pagination-focus-box-shadow: 0 0 0 .15rem rgba(var(--dg-primary-rgb), .35);
}

.page-link {
	color: var(--dg-primary);
}

.page-link:hover {
	color: var(--dg-primary-hover);
}

.page-item.active .page-link {
	background-color: var(--dg-primary);
	border-color: var(--dg-primary);
	color: #fff;
}

.page-link:focus {
	box-shadow: 0 0 0 .15rem rgba(var(--dg-primary-rgb), .35);
}

/* =============================================================================
   DIÁLOGOS (SweetAlert2) — mesma fonte do app (Nunito) p/ tipografia consistente.
   ============================================================================= */
.swal2-popup {
	font-family: "Nunito", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.swal2-popup .swal2-title {
	font-weight: 700;
}

/* =============================================================================
   FORMULÁRIOS / SELEÇÃO — foco e marcações também no teal
   ============================================================================= */

.form-control:focus,
.form-select:focus {
	border-color: var(--dg-primary);
	box-shadow: 0 0 0 .15rem rgba(var(--dg-primary-rgb), .20);
}

.form-check-input:checked {
	background-color: var(--dg-primary);
	border-color: var(--dg-primary);
}

.form-check-input:focus {
	border-color: var(--dg-primary);
	box-shadow: 0 0 0 .15rem rgba(var(--dg-primary-rgb), .20);
}

/* Select2 (inicializado pelo tema) — destaque no teal, não no azul do tema */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--dg-primary) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: rgba(var(--dg-primary-rgb), .12) !important;
	color: inherit !important;
}

/* =============================================================================
   PAGINAÇÃO / DESTAQUES — teal
   ============================================================================= */

.page-link {
	color: var(--dg-primary);
}

.page-item.active .page-link {
	background-color: var(--dg-primary);
	border-color: var(--dg-primary);
}

.text-primary {
	color: var(--dg-primary) !important;
}

.bg-primary {
	background-color: var(--dg-primary) !important;
}

/* =============================================================================
   TABELA RESPONSIVA — vira CARDS no celular (decisão Fase 1)
   -----------------------------------------------------------------------------
   Uso no template: <table class="table dg-table"> (troca a classe morta
   'dt-responsive'). Cada <td>/<th> do corpo recebe data-label="Rótulo".
   A 1ª célula da linha (sem data-label) vira o título do card.
   Nada some — apenas empilha. Desktop segue tabela normal.
   ============================================================================= */

@media (max-width: 991.98px) {

	table.dg-table thead {
		/* rótulos passam a vir do data-label de cada célula */
		display: none;
	}

	table.dg-table,
	table.dg-table tbody,
	table.dg-table tr,
	table.dg-table td,
	table.dg-table th {
		display: block;
		width: 100%;
	}

	table.dg-table tr {
		border: 1px solid var(--dg-border);
		border-radius: .5rem;
		margin-bottom: .75rem;
		padding: .5rem .9rem;
		box-shadow: var(--dg-card-shadow);
		background: #fff;
	}

	table.dg-table td,
	table.dg-table th {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		text-align: right;
		border: 0;
		padding: .35rem 0;
	}

	/* Rótulo (vem do data-label) à esquerda de cada valor */
	table.dg-table td[data-label]::before,
	table.dg-table th[data-label]::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--dg-muted);
		text-align: left;
		margin-right: 1rem;
		white-space: nowrap;
	}

	/* 1ª célula SEM data-label = título do card (com data-label vira linha normal) */
	table.dg-table tbody tr > :first-child:not([data-label]) {
		font-weight: 700;
		font-size: 1.02rem;
		text-align: left;
		border-bottom: 1px solid var(--dg-border);
		padding-bottom: .5rem;
		margin-bottom: .25rem;
	}

	/* Célula de AÇÕES no card: vira bloco alinhado à esquerda e NÃO repete o
	   rótulo "Ações" (o botão já diz Ações). Assim o dropdown — ou os ícones
	   editar/remover — não viram itens de flex; o menu abre logo abaixo do botão. */
	table.dg-table td[data-label="Ações"] {
		display: block;
		text-align: left;
	}

	table.dg-table td[data-label="Ações"]::before {
		display: none;
	}

	/* Dropdown de Ações dentro da tabela: o Bootstrap/Popper posiciona o menu
	   via transform/inset inline. Ao forçar position:static o transform
	   remanescente jogava o menu para fora da tela (parecia "não abrir").
	   Zeramos transform/inset para o menu abrir logo abaixo do botão, no fluxo. */
	table.dg-table td .dropdown-menu {
		position: static !important;
		transform: none !important;
		inset: auto !important;
		float: none;
		margin-top: .25rem;
	}

	/* Alvo de toque confortável nos links do menu lateral no celular (o tema usa
	   8-10px vertical → apertado). Aqui sobem para ~44px sem mexer no desktop. */
	.leftside-menu .side-nav-link,
	.leftside-menu .side-nav-second-level li a {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* Por padrão (card no retrato e tabela no desktop) mostra os rótulos/datas
   completos e esconde as versões abreviadas. A regra da paisagem (abaixo)
   inverte isso; por isso este bloco vem ANTES do @media. */
.dg-th-abbr,
.dg-date-abbr {
	display: none;
}

/* -----------------------------------------------------------------------------
   TABELA COMPACTA EM PAISAGEM (celular/tablet ≤991px em orientação horizontal)
   -----------------------------------------------------------------------------
   No RETRATO a tabela vira card (bloco acima). Já na PAISAGEM há largura de
   sobra para caber todas as colunas — então revertemos ao formato de tabela,
   só reduzindo fonte e espaçamento ao máximo para tudo aparecer sem cortar.
   Vale para TODAS as .dg-table (padronizado). Cabeçalhos/datas com versão
   abreviada (spans .dg-th-abbr / .dg-date-abbr) aparecem só aqui.
   ----------------------------------------------------------------------------- */
@media (max-width: 991.98px) and (orientation: landscape) {

	table.dg-table {
		display: table;
		width: 100%;
		font-size: .72rem;
	}

	table.dg-table thead {
		display: table-header-group;
	}

	table.dg-table tbody {
		display: table-row-group;
	}

	table.dg-table tr {
		display: table-row;
		border: 0;
		border-radius: 0;
		margin: 0;
		padding: 0;
		box-shadow: none;
		background: transparent;
	}

	table.dg-table thead th {
		border-bottom: 2px solid var(--dg-border);
	}

	table.dg-table td,
	table.dg-table th {
		display: table-cell;
		width: auto;
		text-align: left;
		vertical-align: middle;
		gap: 0;
		border: 0;
		border-bottom: 1px solid var(--dg-border);
		padding: .3rem .35rem;
		white-space: normal;
		/* quebra só nos espaços (ex.: "João Ferreira | da Silva"); nunca parte
		   uma palavra/valor no meio (Pagamento, Detalhes, R$ 18.000,00). */
		word-break: normal;
		overflow-wrap: normal;
	}

	/* Some o rótulo do card (temos o thead de volta) e a formatação de "título" */
	table.dg-table td[data-label]::before,
	table.dg-table th[data-label]::before {
		content: none;
	}

	table.dg-table tbody tr > :first-child:not([data-label]) {
		font-weight: 600;
		font-size: inherit;
		text-align: left;
		border-bottom: 1px solid var(--dg-border);
		padding-bottom: .3rem;
		margin-bottom: 0;
	}

	/* Coluna de Ações volta a ser célula normal da linha */
	table.dg-table td[data-label="Ações"] {
		display: table-cell;
		text-align: left;
	}

	table.dg-table td[data-label="Ações"]::before {
		content: none;
	}

	/* Rótulos/datas: mostra as versões abreviadas, esconde as completas */
	.dg-th-full,
	.dg-date-full {
		display: none;
	}

	.dg-th-abbr,
	.dg-date-abbr {
		display: inline;
	}
}

/* Botões enfileirados no cabeçalho (ex.: Ações + Voltar): respiro entre eles —
   principalmente quando quebram linha no celular (senão parecem "um botão só"). */
.text-end > .dg-btn {
	margin-left: .4rem;
	margin-bottom: .4rem;
}

/* O .footer do tema é absoluto (bottom:0) com border-top; no celular o texto
   "Poli-X…" quebra em 2 linhas, ultrapassa o padding reservado e cobre a
   paginação. No celular deixamos o footer FLUIR (estático) logo após o
   conteúdo — some a sobreposição e a linha fica claramente abaixo da paginação. */
@media (max-width: 767.98px) {
	.footer {
		position: static;
	}

	.content-page {
		padding-bottom: 16px;
	}

	/* Toast de feedback (jq-toast): no celular ocupa quase a largura da tela
	   (o tema o fixa em 250px / right:40px / 12px), com texto legível. */
	.jq-toast-wrap,
	.jq-toast-wrap.top-right,
	.jq-toast-wrap.top-left,
	.jq-toast-wrap.bottom-right,
	.jq-toast-wrap.bottom-left {
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
	}

	.jq-toast-single {
		font-size: .9rem;
		line-height: 1.35;
	}
}

/* =============================================================================
   UTILITÁRIOS / LEGADO  (mantidos do arquivo original — não alterar sem revisar)
   ============================================================================= */

.dg-required:after {
	content: " *";
}

.dg-disabled {
	opacity: .5;
}

.select2-tag-dropdown {
	display: none;
}

label.is-invalid {
	color: #fa5c7c;
}

.select2.is-invalid > .select2 .select2-selection {
	border-color: #fa5c7c!important;
}

.select2.is-invalid + .select2-container .selection .select2-selection {
	border-color: #fa5c7c!important;
}

.select2.is-invalid + .select2-container .selection .select2-selection .select2-selection__rendered {
	color: #fa5c7c!important;
}

.select2.is-invalid + .select2-container .selection .select2-selection .select2-selection__arrow b {
	border-color: #fa5c7c transparent transparent transparent;
	border-width: 6px 6px 0 6px;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #eef2f7;
}

.dg-field-action {
	display: flex;
}

.dg-field-action__icon {
	margin: 6px 0 0 5px;
}

/* Upload Foto */
.dz-image img{
    width: 200px;
    height:200px;
}

.dg-acoes-btn {
	cursor: pointer;
}