:root {
  --cg-primary: #2563eb;
  --cg-primary-dark: #1e3a8a;
  --cg-secondary: #0d9488;
  --cg-success: #16a34a;
  --cg-warning: #d97706;
  --cg-danger: #dc2626;
  --cg-background: #f8fafc;
  --cg-surface: #ffffff;
  --cg-text-primary: #172554;
  --cg-text-secondary: #64748b;
  --cg-border: #e2e8f0;
  --cg-bottom-nav-height: 5.25rem;
  --cg-space-1: 0.5rem;
  --cg-space-2: 1rem;
  --cg-space-3: 1.5rem;
  --cg-space-4: 2rem;
}

[x-cloak] { display: none !important; }

body { background: var(--cg-background); }

.cg-safe-top { padding-top: env(safe-area-inset-top, 0); }
.cg-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.cg-app-content { padding-bottom: calc(var(--cg-bottom-nav-height) + 1.5rem + env(safe-area-inset-bottom, 0px)); }

/* Mantém a seleção em lote perceptível sem perder o contraste da linha. */
#atendimentos-list-page [data-atendimento-row]:has(.cb-atendimento:checked) {
  background-color: rgba(219, 234, 254, 0.72);
  box-shadow: inset 3px 0 0 #2563eb;
}

#atendimentos-list-page [data-atendimento-row]:has(.cb-atendimento:checked):hover {
  background-color: rgba(191, 219, 254, 0.78);
}

/* Mantém o resumo do plano com a mesma dimensão nas páginas puras e legadas. */
[data-ui-v2-topbar] .cg-topbar-plan {
  align-self: center;
  padding: 0.5rem 0.75rem !important;
}

/* Classes próprias evitam a colisão com `.hidden` do tema Bootstrap legado. */
.ui-v2-desktop-nav { display: none; }
.ui-v2-mobile-nav { display: flex; }

/* Superfície cinza-azulada da navegação inferior. */
.cg-bottom-nav-surface {
  border-color: rgba(100, 116, 139, 0.24);
  background:
    linear-gradient(180deg, rgba(241, 245, 249, 0.98), rgba(226, 232, 240, 0.98));
  box-shadow: 0 -12px 32px -24px rgba(30, 64, 175, 0.46);
}

[data-ui-v2-bottom-nav] a:not([data-shortcut="F12"]):not(.bg-blue-50),
[data-ui-v2-bottom-nav] button,
[data-ui-v2-mobile-nav] a:not(.text-blue-700),
[data-ui-v2-mobile-nav] button {
  color: #334155 !important;
}

[data-ui-v2-bottom-nav] a:not([data-shortcut="F12"]):not(.bg-blue-50):hover,
[data-ui-v2-bottom-nav] button:hover,
[data-ui-v2-mobile-nav] a:not(.text-blue-700):hover,
[data-ui-v2-mobile-nav] button:hover {
  color: #1d4ed8 !important;
  background-color: rgba(219, 234, 254, 0.88) !important;
}

[data-ui-v2-bottom-nav] .bg-blue-50 {
  margin: 0.4rem 0.15rem;
  border-radius: 0.9rem;
  color: #ffffff !important;
  background-color: var(--cg-primary) !important;
  box-shadow: 0 8px 20px -13px rgba(37, 99, 235, 0.9);
}

[data-ui-v2-bottom-nav] .bg-blue-50:hover {
  color: #ffffff !important;
  background-color: #1d4ed8 !important;
}

[data-ui-v2-bottom-nav] .bg-blue-50 i,
[data-ui-v2-bottom-nav] .bg-blue-50 span {
  color: #ffffff !important;
}

[data-ui-v2-mobile-nav] a.text-blue-700 {
  margin: 0.35rem 0.12rem;
  border-radius: 0.9rem;
  color: #ffffff !important;
  background-color: var(--cg-primary) !important;
  box-shadow: 0 8px 20px -13px rgba(37, 99, 235, 0.9);
}

[data-ui-v2-mobile-nav] a.text-blue-700:hover {
  color: #ffffff !important;
  background-color: #1d4ed8 !important;
}

[data-ui-v2-mobile-nav] a.text-blue-700 i {
  color: #ffffff !important;
}

/* Impede que o `kbd` do Bootstrap legado deforme os atalhos do menu v2. */
[data-ui-v2-bottom-nav] kbd {
  display: inline-flex;
  min-width: 1.35rem;
  min-height: 0.9rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.1rem 0.25rem !important;
  border: 0;
  border-radius: 0.25rem;
  color: #64748b !important;
  background: rgba(148, 163, 184, 0.16) !important;
  font-family: inherit !important;
  font-size: 0.5rem !important;
  font-weight: 600;
  line-height: 1 !important;
  box-shadow: none;
  opacity: 0.8;
}

[data-ui-v2-bottom-nav] .bg-blue-50 kbd,
[data-ui-v2-bottom-nav] [data-shortcut="F12"] kbd {
  color: #dbeafe !important;
  background: rgba(255, 255, 255, 0.16) !important;
  opacity: 0.9;
}

@media (min-width: 1024px) {
  .ui-v2-desktop-nav { display: block; }
  .ui-v2-mobile-nav { display: none; }
}

.htmx-indicator { opacity: 0; visibility: hidden; transition: opacity 160ms ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; visibility: visible; }

@media (max-width: 1023px) {
  :root { --cg-bottom-nav-height: 5rem; }
  .cg-app-content { padding-bottom: calc(5rem + 1rem + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}