/**
 * Folha estática em /public — não passa pelo pipeline Tailwind/Webpack.
 * Se o CSS principal (_next/static/css/...) falhar (404, cache, Docker), isto
 * ainda devolve layout legível com as classes hubia-* já presentes no HTML.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.hubia-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: row;
}

@media (min-width: 768px) {
  .hubia-shell {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: stretch;
    transition: grid-template-columns 380ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Paridade com md:grid-cols-[4.5rem_minmax(0,1fr)] quando o bundle Tailwind falha */
  .hubia-shell[data-hubia-sidebar="collapsed"] {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }
}

/**
 * :where() zera especificidade — não pode sobrepor `aside.bg-sidebar` do Tailwind
 * (antes: aside.hubia-shell-sidebar ganhava de .bg-sidebar e a sidebar ficava sempre clara).
 */
:where(aside.hubia-shell-sidebar) {
  border-right: 1px solid #e5e7eb;
  background-color: #fafafa;
  color: #171717;
}

@media (max-width: 767px) {
  aside.hubia-shell-sidebar {
    flex-shrink: 0;
    width: 16rem;
  }
}

@media (min-width: 768px) {
  aside.hubia-shell-sidebar {
    width: 100%;
    min-width: 0;
  }
}

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

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

aside.hubia-shell-sidebar li {
  margin: 0;
}

/**
 * :where() zera especificidade — senão `color: inherit` ganha de `text-sidebar-primary-foreground`
 * nos links Tailwind e o item activo fica texto escuro sobre fundo escuro.
 */
:where(aside.hubia-shell-sidebar a) {
  color: inherit;
  text-decoration: none;
}

:where(aside.hubia-shell-sidebar button[type="button"]) {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
}

/**
 * Sem Tailwind, `hidden` / `md:hidden` / `md:flex` não existem — os dois blocos
 * da sidebar (expandido + rail) apareciam em simultâneo. Isto espelha a lógica
 * em CSS puro via data-hubia-nav-collapsed no aside.
 */
.hubia-sidebar-collapsed-only {
  display: none;
}

.hubia-sidebar-expanded-only {
  display: block;
}

@media (max-width: 767px) {
  .hubia-sidebar-rail-spacer {
    display: none !important;
  }

  .hubia-sidebar-collapsed-only {
    display: none !important;
  }

  .hubia-sidebar-expanded-only {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .hubia-sidebar-rail-spacer {
    display: block !important;
    width: 4.5rem;
    min-width: 4.5rem;
    flex-shrink: 0;
  }

  aside.hubia-shell-sidebar[data-hubia-nav-collapsed="true"]
    .hubia-sidebar-expanded-only {
    display: none !important;
  }

  aside.hubia-shell-sidebar[data-hubia-nav-collapsed="true"]
    .hubia-sidebar-collapsed-only {
    display: flex !important;
    flex-direction: column;
  }

  aside.hubia-shell-sidebar[data-hubia-nav-collapsed="false"]
    .hubia-sidebar-expanded-only {
    display: block !important;
  }

  aside.hubia-shell-sidebar[data-hubia-nav-collapsed="false"]
    .hubia-sidebar-collapsed-only {
    display: none !important;
  }
}

/* Login (classes do globals-auth-fallback) */
:where(.hubia-auth-page) {
  font-family: system-ui, sans-serif;
  background: #fafafa;
  color: #171717;
  min-height: 100vh;
  padding: 2.5rem 1rem;
}