/* =============================================================
   IDENTIDADE VISUAL MDEV — BASE
   Reset, tipografia e o esqueleto da aplicacao.
   Depende de tokens.css (inclua antes deste arquivo).
   ============================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-main);
  background: var(--bg-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.3;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { color: var(--text-secondary); }

a { color: var(--brand-primary); text-decoration: none; transition: color var(--transition); }
/* Link de texto muda de cor no hover. Os botoes ficam de fora: o :hover
   generico tem especificidade maior que a classe do botao e sobrescreveria a
   cor do rotulo — num botao azul, o texto sumiria no proprio fundo. */
a:not(.btn):hover { color: var(--brand-primary-hover); }

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

img, svg { display: block; max-width: 100%; }

/* Foco visivel e sempre na cor da marca: e o que garante
   navegacao por teclado. Nunca remova sem substituto. */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------------- ESQUELETO ---------------- */

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width var(--transition-slow);
}

.sidebar__brand {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.sidebar__logo {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--brand-gold), var(--brand-accent));
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--bg-body);
  flex-shrink: 0;
}

.sidebar__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sidebar__nav { padding: var(--space-4) var(--space-3); flex: 1; }

/* ---------------------------------------------------------
   Grupos em accordion
   ---------------------------------------------------------
   Cada grupo e um cabecalho (icone colorido + titulo + seta) e uma lista que
   abre e fecha. Abrir um fecha os outros — quem controla e o JS do layout. */
.nav-group { margin-bottom: var(--space-2); }

.nav-group__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}
.nav-group__cabecalho:hover { background: var(--bg-sidebar-hover); color: var(--text-secondary); }

.nav-group__icone {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--nav-cor) 16%, transparent);
  color: var(--nav-cor);
  font-size: var(--fs-md);
  transition: background var(--transition);
}
.nav-group--aberto .nav-group__icone {
  background: color-mix(in srgb, var(--nav-cor) 28%, transparent);
}

.nav-group__titulo {
  flex: 1;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.nav-group--aberto .nav-group__titulo { color: var(--text-primary); }

.nav-group__seta {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform var(--transition);
}
.nav-group--aberto .nav-group__seta { transform: rotate(180deg); }

/* Abre/fecha animando a altura com grid-template-rows: nao precisa medir a
   altura com JS e funciona com qualquer numero de itens. */
.nav-group__itens {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}
.nav-group--aberto .nav-group__itens { grid-template-rows: 1fr; }

.nav-group__itens-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 42px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.nav-item:hover { background: var(--bg-sidebar-hover); color: var(--text-primary); }
.nav-item.active {
  background: var(--brand-primary-pill);
  color: var(--brand-primary);
  font-weight: 600;
}
.nav-item__icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  /* A cor vem do grupo (--nav-cor). Sem ela, cai no cinza padrao. */
  color: var(--nav-cor, var(--text-muted));
  transition: color var(--transition);
}

/* ---------------------------------------------------------
   Menu recolhido (rail com o icone de cada grupo)
   ---------------------------------------------------------
   Recolhido, so o icone do grupo aparece. Clicar num icone expande o menu e
   abre o grupo — isso e feito no JS do layout. O estado fica no localStorage
   para nao piscar a cada navegacao. */
.rvs-menu-recolhido .sidebar { width: var(--sidebar-width-collapsed); }

.rvs-menu-recolhido .sidebar__brand { justify-content: center; padding: 0; }
.rvs-menu-recolhido .sidebar__name { display: none; }

.rvs-menu-recolhido .sidebar__nav { padding: var(--space-4) var(--space-2); }

.rvs-menu-recolhido .nav-group__titulo,
.rvs-menu-recolhido .nav-group__seta,
.rvs-menu-recolhido .nav-group__itens { display: none; }

.rvs-menu-recolhido .nav-group__cabecalho { justify-content: center; padding: 6px 0; }
.rvs-menu-recolhido .nav-group__icone { width: 38px; height: 38px; font-size: var(--fs-lg); }

.topbar__toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.topbar__toggle:hover { background: var(--bg-sidebar-hover); color: var(--text-primary); }

/* Area principal */

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 20;
}

.content {
  padding: var(--space-6);
  max-width: 1600px;
  width: 100%;
}

.page-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  margin-bottom: var(--space-6);
}

/* Utilitarios usados em todo o sistema */

.text-muted    { color: var(--text-muted); }
.text-capitalize { text-transform: capitalize; }
.text-secondary{ color: var(--text-secondary); }
.text-primary-text { color: var(--text-primary); }
.text-success  { color: var(--success); }
.text-danger   { color: var(--danger); }
.text-warning  { color: var(--warning); }
.text-brand    { color: var(--brand-primary); }
.text-gold     { color: var(--brand-gold); }

.mono          { font-family: var(--font-mono); }

.flex          { display: flex; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-1         { gap: var(--space-1); }
.gap-2         { gap: var(--space-2); }
.gap-3         { gap: var(--space-3); }
.gap-4         { gap: var(--space-4); }
.w-full        { width: 100%; }
.hidden        { display: none !important; }

/* -----------------------------------------------------------------------------
   Marca do MDev na barra lateral

   O logo é uma imagem com fundo transparente sobre a barra escura, então
   recebe um leve halo na cor da marca. Sem ele a marca de azul-marinho
   some no fundo da barra, que é da mesma família de azul.
   -------------------------------------------------------------------------- */

.sidebar__marca {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 10px rgba(8, 90, 184, 0.55))
          brightness(1.12)
          saturate(1.08);
}

/* Recolhido, sobra o símbolo sozinho; o nome já é ocultado pela regra
   do menu recolhido. */
.rvs-menu-recolhido .sidebar__marca { width: 28px; height: 28px; }