/* ══════════════════════════════════════════════════════════════════════════
   Sistema de design do Gestor — MESMOS tokens do tema "Aurora" do painel
   principal (Template/src/theme/palette/colors.ts e palette/index.ts),
   pra ser identidade única, não um sistema visual inventado à parte.
   Raio de 8px (não mais que isso em nenhum componente — o Aurora não usa
   cantos exagerados em card nenhum), sombra idêntica à do Paper do Aurora
   (0 1px 3px rgba(17,20,23,.08)), tipografia Plus Jakarta Sans (fonte
   padrão do Aurora, troca a Public Sans que era só herança do Sneat).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Marca — blue.500/600/700/50 do Aurora */
  --mc-primary:            #3385F0;
  --mc-primary-hover:      #2B71CC;
  --mc-primary-dark:       #245DA8;
  --mc-primary-soft:       #EAF3FD;
  --mc-primary-soft-text:  #245DA8;
  --mc-primary-glow:       rgba(51, 133, 240, .18);

  /* Neutros — grey.50/300/400/600/800 do Aurora (mesmo text.primary/secondary) */
  --mc-bg:                 #F6F9FB;
  --mc-surface:            #FFFFFF;
  --mc-border:             #C3D3DB;
  --mc-text:               #1B2124;
  --mc-text-muted:         #4D595E;
  --mc-text-faint:         #9CAEB8;

  /* Semânticas — green/orange/red/lightBlue do Aurora, não Bootstrap */
  --mc-success:            #099F69;
  --mc-success-soft:       #E6F5F0;
  --mc-warning:            #AC631D;
  --mc-warning-soft:       #FEEFE1;
  --mc-danger:             #D02241;
  --mc-danger-soft:        #F9E2E6;
  --mc-info:               #0DA6D6;
  --mc-info-soft:          #E0F3FA;
  --mc-secondary:          #4D595E;
  --mc-secondary-soft:     #EBF2F5;

  /* Forma — 8px é o raio base do Aurora em TODO componente (Paper/Button/Input) */
  --mc-radius-sm:          6px;
  --mc-radius:             8px;
  --mc-radius-lg:          15px;
  --mc-card-border:        #ebebeb;
  --mc-shadow-sm:          0 1px 2px rgba(17, 20, 23, .06);
  --mc-shadow:             0 1px 3px rgba(17, 20, 23, .08);
  --mc-shadow-md:          0 4px 14px rgba(17, 20, 23, .1);

  /* Ponte pro Bootstrap — componentes que já leem essas vars pegam o tema sozinhos */
  --bs-primary:            var(--mc-primary);
  --bs-primary-rgb:        51, 133, 240;
  --bs-body-bg:            var(--mc-bg);
  --bs-body-bg-rgb:        247, 250, 252;
  --bs-body-color:         var(--mc-text);
  --bs-border-color:       var(--mc-border);
  --bs-info:               var(--mc-info);
  --bs-info-rgb:           13, 166, 214;
}

:root[data-bs-theme="dark"] {
  /* grey.950/900/800/700/50/400 do Aurora — mesma marca, só neutros invertidos */
  --mc-bg:                 #06080A;
  --mc-surface:            #111417;
  --mc-border:             #262D30;
  --mc-card-border:        #262D30;
  --mc-text:               #F7FAFC;
  --mc-text-muted:         #9CAEB8;
  --mc-text-faint:         #77878F;

  --mc-primary-soft:       rgba(51, 133, 240, .18);
  --mc-primary-soft-text:  #7DB1F5;
  --mc-primary-glow:       rgba(51, 133, 240, .26);
  --mc-success-soft:       rgba(9, 159, 105, .18);
  --mc-warning-soft:       rgba(246, 141, 42, .18);
  --mc-danger-soft:        rgba(208, 34, 65, .2);
  --mc-info-soft:          rgba(13, 166, 214, .18);
  --mc-secondary-soft:     rgba(255, 255, 255, .06);

  --mc-shadow-sm:          0 1px 2px rgba(0, 0, 0, .35);
  --mc-shadow:             0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
  --mc-shadow-md:          0 4px 16px rgba(0, 0, 0, .5);

  --bs-body-bg-rgb:        6, 8, 10;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

body {
  background-color: var(--mc-bg);
  color: var(--mc-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.text-dark, .text-body, .card-title,
.fw-bold, .fw-semibold {
  color: var(--mc-text);
}
.text-muted { color: var(--mc-text-muted) !important; }

/* Título de página — mesmo <h4 class="fw-bold mb-1"> em toda tela, uma
   regra só dá hierarquia tipográfica de verdade em todas de uma vez. */
h4.fw-bold, .h4.fw-bold { font-size: 1.5rem; letter-spacing: -.01em; }

/* ── Cards — sem borda no claro (só sombra, igual ao Paper do Aurora:
   Paper.tsx usa borderWidth:0 no claro e só acrescenta 1px no escuro,
   porque sombra sozinha já não aparece bem em fundo escuro) ─────────── */

.card {
  background-color: var(--mc-surface);
  border: 1px solid var(--mc-card-border);
  border-radius: var(--mc-radius-lg);
  box-shadow: var(--mc-shadow);
}
.card-header, .card-footer {
  background-color: transparent;
  border-color: var(--mc-card-border);
}

/* ── Botões ───────────────────────────────────────────────────────────── */

.btn { border-radius: var(--mc-radius-sm); font-weight: 600; }

.btn-primary {
  background-color: var(--mc-primary) !important;
  border-color:     var(--mc-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--mc-primary-hover) !important;
  border-color:     var(--mc-primary-hover) !important;
}
.btn-outline-primary {
  color:        var(--mc-primary) !important;
  border-color: var(--mc-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--mc-primary) !important;
  color: #fff !important;
}
.btn-outline-secondary {
  color: var(--mc-text-muted) !important;
  border-color: var(--mc-border) !important;
}
.btn-outline-secondary:hover {
  background-color: var(--mc-secondary-soft) !important;
  color: var(--mc-text) !important;
}
.btn-info {
  background-color: var(--mc-info) !important;
  border-color:     var(--mc-info) !important;
  color: #fff !important;
}
.btn-outline-info { color: var(--mc-info) !important; border-color: var(--mc-info) !important; }
.btn-outline-info:hover { background-color: var(--mc-info) !important; color: #fff !important; }

/* ── Links, texto e badges primary ───────────────────────────────────── */

a.text-primary, .text-primary { color: var(--mc-primary) !important; }
.bg-primary       { background-color: var(--mc-primary) !important; }
.badge.bg-primary { background-color: var(--mc-primary) !important; }

/* ── Badges de status — pill com indicador de ponto, cores recombinadas ─ */

.badge.bg-label-primary,
.badge.bg-label-secondary,
.badge.bg-label-success,
.badge.bg-label-warning,
.badge.bg-label-danger,
.badge.bg-label-info {
  border-radius: 999px !important;
  font-weight: 600;
  font-size: .74rem;
  line-height: 1.2;
  padding: .33em .8em .33em .62em;
  /* Mesmo padrão do Chip variant="soft" do Aurora — fundo suave + anel
     sutil na mesma cor, não só uma chapa lisa. */
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.bg-label-primary   { background-color: var(--mc-primary-soft)   !important; color: var(--mc-primary-soft-text) !important; }
.bg-label-secondary { background-color: var(--mc-secondary-soft) !important; color: var(--mc-text-muted)        !important; }
.bg-label-success   { background-color: var(--mc-success-soft)   !important; color: var(--mc-success)           !important; }
.bg-label-warning   { background-color: var(--mc-warning-soft)   !important; color: var(--mc-warning)           !important; }
.bg-label-danger    { background-color: var(--mc-danger-soft)    !important; color: var(--mc-danger)            !important; }
.bg-label-info       { background-color: var(--mc-info-soft)      !important; color: var(--mc-info) !important; }
.border-label-info    { border-color: var(--mc-info) !important; }
.text-info             { color: var(--mc-info) !important; }
.alert-info {
  background-color: var(--mc-info-soft) !important;
  border-color:     transparent !important;
  color:            var(--mc-info) !important;
}
.alert-success { background-color: var(--mc-success-soft) !important; border-color: transparent !important; color: var(--mc-success) !important; }
.alert-warning { background-color: var(--mc-warning-soft) !important; border-color: transparent !important; color: var(--mc-warning) !important; }
.alert-danger  { background-color: var(--mc-danger-soft)  !important; border-color: transparent !important; color: var(--mc-danger)  !important; }

/* ── Inputs ───────────────────────────────────────────────────────────── */

.form-control, .form-select {
  border-radius: var(--mc-radius-sm);
  border-color: var(--mc-border);
  background-color: var(--mc-surface);
  color: var(--mc-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--mc-primary) !important;
  box-shadow: 0 0 0 0.2rem var(--mc-primary-soft) !important;
}
.form-check-input:checked {
  background-color: var(--mc-primary) !important;
  border-color:     var(--mc-primary) !important;
}

/* ── Paginação / nav-pills / nav-tabs / progress ─────────────────────── */

.page-item.active .page-link { background-color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; }
.page-link { color: var(--mc-primary) !important; background-color: var(--mc-surface); border-color: var(--mc-border); }
.page-link:hover { color: var(--mc-primary-hover) !important; }
.nav-pills .nav-link.active, .nav-tabs .nav-link.active {
  background-color: var(--mc-primary) !important;
  border-color:     var(--mc-primary) !important;
  color: #fff !important;
}
.progress-bar { background-color: var(--mc-primary) !important; }

/* ── Tabelas — header discreto, linhas respiradas, bordas sutis ─────── */

.table { color: var(--mc-text); }
.table > :not(caption) > * > * { border-bottom-color: var(--mc-border); }
.table thead th, .table > thead {
  background-color: transparent !important;
  color: var(--mc-text-faint);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--mc-border);
}
.table-comfy > :not(caption) > * > * { padding-top: .9rem; padding-bottom: .9rem; }

/* ── Sidebar — item ativo em pill sólido, sem a barrinha lateral do tema ─ */

.layout-menu, .bg-menu-theme {
  background-color: var(--mc-surface) !important;
  border-right: none;
}
:root[data-bs-theme="dark"] .layout-menu,
:root[data-bs-theme="dark"] .bg-menu-theme { border-right: 1px solid var(--mc-border); }
.bg-menu-theme .menu-inner > .menu-item > .menu-link {
  border-radius: var(--mc-radius-sm);
  margin: 1px .75rem;
  color: var(--mc-text-muted);
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  background-color: var(--mc-primary) !important;
  color: #fff !important;
  box-shadow: var(--mc-shadow-sm);
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link .menu-icon {
  color: #fff !important;
}
.bg-menu-theme .menu-inner > .menu-item.active::before { display: none; }
.bg-menu-theme .menu-inner .menu-sub > .menu-item.active .menu-icon { color: var(--mc-primary) !important; }
.bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link.menu-toggle { background-color: var(--mc-primary-soft) !important; }
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before {
  background-color: var(--mc-primary) !important;
  border: 3px solid var(--mc-primary-soft) !important;
}
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover {
  background-color: var(--mc-secondary-soft) !important;
  color: var(--mc-text) !important;
}
.menu-header-text { color: var(--mc-text-faint) !important; letter-spacing: .06em; }

/* ── Navbar ───────────────────────────────────────────────────────────── */

.layout-navbar, .bg-navbar-theme {
  background-color: var(--mc-surface) !important;
  border-bottom: none;
  box-shadow: none !important;
}
:root[data-bs-theme="dark"] .layout-navbar,
:root[data-bs-theme="dark"] .bg-navbar-theme { border-bottom: 1px solid var(--mc-border); }

/* ── Marca (logo row) — mesmo efeito do painel React (Template/src/
   components/common/Logo.tsx): no hover, o anel de pontos gira e o
   texto faz uma varredura de cor. Fica aqui no style.css (não preso só
   no header.html) pra funcionar em qualquer tela que use essas
   classes — inclusive Login/RecuperarSenha/ResetarSenha. ───────────── */

.menu .app-brand.demo { height: 64px; margin-top: 12px; }

@keyframes brand-mark-spin { to { transform: rotate(360deg); } }
.app-brand-logo { transform-origin: 50% 50%; }
.app-brand-link:hover .app-brand-logo { animation: brand-mark-spin 1.1s linear infinite; }
.app-brand-text {
  background: linear-gradient(100.06deg, #3385f0 6.97%, #6ba5f5 49.36%, var(--mc-text-muted) 50.11%, var(--mc-text-muted) 87.87%);
  background-size: 240% 100%;
  background-position: right;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position .3s cubic-bezier(0.8, 0.63, .5, 1);
}
.app-brand-link:hover .app-brand-text { background-position: left; }

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page { padding-top: 76px !important; }
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page { padding-top: 64px !important; }
.content-wrapper .navbar { z-index: auto; }

/* ── Saudação (Dashboard) — título simples, igual ao padrão de página do
   Aurora (Typography variant="h4"), sem banner/gradiente — o Aurora não
   usa esse recurso em nenhuma tela do painel principal. ──────────────── */

.mc-hero-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--mc-text);
  margin-bottom: .2rem;
}
.mc-hero-subtitle {
  color: var(--mc-text-muted);
}

/* ── KPI cards (Dashboard) — ícone em círculo (cor do token, raio da
   marca não é "arredondamento exagerado" — é só um círculo), rótulo ao
   lado, número grande embaixo, no raio de 8px do resto do painel. ──── */

.mc-kpi-card {
  background-color: var(--mc-surface);
  border: 1px solid var(--mc-card-border);
  border-radius: var(--mc-radius-lg);
  box-shadow: var(--mc-shadow);
  padding: 1.25rem 1.4rem;
  height: 100%;
}
.mc-kpi-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
/* Ícone discreto, sem chip colorido — só o glifo na cor do rótulo,
   igual à referência (nenhum card tinta o ícone diferente do outro). */
.mc-kpi-icon {
  font-size: 1.05rem;
  color: var(--mc-text-muted);
  line-height: 1;
  display: flex;
  flex-shrink: 0;
}
.mc-kpi-label {
  color: var(--mc-text-muted);
  font-size: .85rem;
  font-weight: 600;
}
.mc-kpi-value {
  color: var(--mc-text);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.1;
}
/* Tendência em texto puro (seta + %), sem pílula — legenda meramente
   descritiva não é tendência, não leva seta nem cor (.mc-kpi-caption). */
.mc-kpi-trend {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 600;
  margin-top: .4rem;
  color: var(--mc-text-muted);
}
.mc-kpi-trend .mc-kpi-trend-value { font-weight: 700; }
.mc-kpi-trend.up   .mc-kpi-trend-value { color: var(--mc-success); }
.mc-kpi-trend.down .mc-kpi-trend-value { color: var(--mc-danger); }

/* "Card dentro do card": só ícone+rótulo (.mc-kpi-header) ficam fora,
   no fundo branco do card externo — valor, indicador de tendência E o
   mini-gráfico ficam TODOS juntos dentro dessa caixa cinza interna. */
.mc-kpi-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background-color: var(--mc-bg);
  border: none;
  border-radius: var(--mc-radius-lg);
  padding: .85rem 1rem;
}
:root[data-bs-theme="dark"] .mc-kpi-body { background-color: rgba(255, 255, 255, .04); }
.mc-kpi-visual {
  flex-shrink: 0;
  width: 64px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mc-kpi-caption {
  display: block;
  color: var(--mc-text-faint);
  font-size: .78rem;
  margin-top: .5rem;
}

/*
* Content
******************************************************************************/

.demo-blocks > * { display: block !important; }
.demo-inline-spacing > * { margin: 1rem 0.375rem 0 0 !important; }
.demo-vertical-spacing > * { margin-top: 1rem !important; margin-bottom: 0 !important; }
.demo-vertical-spacing.demo-only-element > :first-child { margin-top: 0 !important; }
.demo-vertical-spacing-lg > * { margin-top: 1.875rem !important; margin-bottom: 0 !important; }
.demo-vertical-spacing-lg.demo-only-element > :first-child { margin-top: 0 !important; }
.demo-vertical-spacing-xl > * { margin-top: 5rem !important; margin-bottom: 0 !important; }
.demo-vertical-spacing-xl.demo-only-element > :first-child { margin-top: 0 !important; }

.rtl-only { display: none !important; text-align: left !important; direction: ltr !important; }
[dir='rtl'] .rtl-only { display: block !important; }

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img { width: 900px; }
.layout-demo-info { text-align: center; margin-top: 1rem; }