/* NuvTI Ponto — pequenos ajustes que NÃO fazem parte do template Metronic.
   Mantido separado de assets/css/styles.css (arquivo do template, intocado)
   para deixar claro o que é customização própria vs. asset original. */

/* Placeholder para as CSS variables de white-label (spec 02 §7). O
   MainLayout chama ntiPonto.applyBranding(...) em runtime, que seta
   --color-primary/--color-secondary via JS; aqui só documentamos o
   contrato e damos um valor inicial neutro igual ao tema padrão. */
:root {
	--color-primary: var(--color-primary, #1a56db);
	--color-secondary: var(--color-secondary, #64748b);
}

/* Relógio ao vivo da tela /marcar. */
.nti-relogio {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* ==== Utilitarios ausentes do CSS pre-compilado do template (gerado) ====
   O styles.css do Metronic so contem classes usadas nas paginas HTML originais;
   estas regras completam as utilities Tailwind usadas pelo app WASM. */
.\-mt-3{margin-top:-0.75rem}
.h-\[110px\]{height:110px}
.h-\[120px\]{height:120px}
.h-\[140px\]{height:140px}
.h-\[320px\]{height:320px}
.m-4{margin-top:1rem;margin-bottom:1rem;margin-left:1rem;margin-right:1rem}
.max-h-\[25px\]{max-height:25px}
.max-h-\[280px\]{max-height:280px}
.max-h-\[34px\]{max-height:34px}
.max-h-\[70vh\]{max-height:70vh}
.max-w-\[200px\]{max-width:200px}
.max-w-\[220px\]{max-width:220px}
.max-w-\[280px\]{max-width:280px}
.max-w-\[320px\]{max-width:320px}
.max-w-\[420px\]{max-width:420px}
.max-w-\[480px\]{max-width:480px}
.max-w-\[520px\]{max-width:520px}
.max-w-\[560px\]{max-width:560px}
.max-w-\[640px\]{max-width:640px}
.max-w-\[720px\]{max-width:720px}
.max-w-\[760px\]{max-width:760px}
.max-w-\[860px\]{max-width:860px}
.max-w-\[900px\]{max-width:900px}
.min-h-\[22px\]{min-height:22px}
.min-h-\[280px\]{min-height:280px}
.min-h-\[70px\]{min-height:70px}
.min-h-\[80px\]{min-height:80px}
.mt-1{margin-top:0.25rem}
.mt-1\.5{margin-top:0.375rem}
.mt-3\.5{margin-top:0.875rem}
.mt-6{margin-top:1.5rem}
.my-1{margin-top:0.25rem;margin-bottom:0.25rem}
.p-1{padding-top:0.25rem;padding-bottom:0.25rem;padding-left:0.25rem;padding-right:0.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.w-\[20px\]{width:20px}
.w-\[250px\]{width:250px}
.w-\[6px\]{width:6px}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pb-0\.5 {
  padding-bottom: calc(var(--spacing) * 0.5);
}

.max-h-\[80vh\] {
  max-height: 80vh;
}

/* Grades responsivas ausentes do CSS pré-compilado (geradas) */
@media (min-width: 64rem) {
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }
}

@media (min-width: 64rem) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 64rem) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 48rem) {
  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }
}

@media (min-width: 48rem) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.min-h-\[236px\] {
  min-height: 236px;
}

.h-\[560px\] {
  height: 560px;
}

/* Largura exata do input de data: "dd/mm/aaaa" (13px) + ícone + paddings do kt-input. */
.w-\[124px\] {
  width: 124px;
}

/* Indicador nativo do calendário alinhado à moldura do kt-input (tamanho fixo, sem folga do UA). */
input[type="date"].kt-input::-webkit-calendar-picker-indicator {
  width: 1rem;
  height: 1rem;
  padding: 0;
  margin-inline-start: calc(var(--spacing) * 1);
  opacity: 0.7;
  cursor: pointer;
}

.min-h-\[180px\] {
  min-height: 180px;
}

.h-\[480px\] {
  height: 480px;
}

/* Aba ativa: o CSS do template exige o atributo [data-kt-tab-toggle] (JS do KTUI); nossas abas são
   gerenciadas pelo Blazor — replicamos as MESMAS regras usando apenas a classe .active. */
.kt-tabs.kt-tabs-line .kt-tab-toggle.active {
  border-color: var(--primary);
  color: var(--primary);
}

.h-\[600px\] {
  height: 600px;
}

.max-h-\[85vh\] {
  max-height: 85vh;
}