/*
 * Weiss Moveis - tema da aplicacao.
 *
 * Bulma 1.x e configurado por custom properties, entao o tema todo mora aqui
 * e o bulma.min.css permanece intocado.
 */

:root {
  /* Petroleo escuro: cor das acoes principais. */
  --bulma-primary-h: 199deg;
  --bulma-primary-s: 44%;
  --bulma-primary-l: 30%;

  /*
   * O Bulma calcula a cor do texto sobre o primary na compilacao, assumindo o
   * turquesa claro que vem de fabrica: o padrao e primary-05-l, quase preto.
   * Como nosso primary e escuro, o texto precisa ser branco - senao o rotulo
   * do botao fica ilegivel.
   */
  --bulma-primary-invert-l: 100%;
  --bulma-primary-dark-invert-l: 100%;

  /*
   * Ambar amadeirado: usado em destaques e no estado ativo do menu.
   * 40% de luminosidade da 4,7:1 de contraste com o branco; em 44% cai para
   * 4,0:1 e nao alcanca o minimo de leitura.
   */
  --bulma-link-h: 28deg;
  --bulma-link-s: 68%;
  --bulma-link-l: 40%;
  --bulma-link-invert-l: 100%;
  --bulma-link-dark-invert-l: 100%;

  --bulma-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --bulma-radius: 0.5rem;
  --bulma-radius-small: 0.375rem;
  --bulma-radius-large: 0.75rem;

  /* Tokens proprios do layout. */
  --wm-sidebar-largura: 250px;
  --wm-sidebar-bg: #1d232e;
  --wm-sidebar-bg-hover: #262e3c;
  --wm-sidebar-texto: #aeb7c6;
  --wm-sidebar-texto-ativo: #ffffff;
  --wm-acento: hsl(28deg 68% 52%);
  --wm-borda: #e4e7ec;
  --wm-fundo: #f6f7f9;
  --wm-topbar-altura: 60px;
}

html {
  background-color: var(--wm-fundo);
}

body {
  background-color: var(--wm-fundo);
  min-height: 100vh;
}

/* ------------------------------------------------------------------ *
 * Estrutura: sidebar fixa + conteudo deslocado
 * ------------------------------------------------------------------ */

.wm-shell {
  min-height: 100vh;
}

.wm-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--wm-sidebar-largura);
  background-color: var(--wm-sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 30;
  overflow-y: auto;
}

.wm-sidebar__marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.wm-sidebar__marca-nome {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: 0.01em;

  /*
   * O nome vem das configuracoes e pode ser uma razao social inteira. Duas
   * linhas e o limite antes de empurrar o menu para baixo; o resto vira
   * reticencias, com o nome completo no title.
   */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.wm-sidebar__marca-sub {
  color: var(--wm-sidebar-texto);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wm-sidebar__logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--wm-acento);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  flex: none;
}

.wm-nav {
  padding: 1rem 0.75rem;
  flex: 1;
}

.wm-nav__titulo {
  color: #6b7488;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1rem 0.75rem 0.4rem;
}

.wm-nav__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--bulma-radius-small);
  color: var(--wm-sidebar-texto);
  font-size: 0.925rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wm-nav__item:hover {
  background-color: var(--wm-sidebar-bg-hover);
  color: var(--wm-sidebar-texto-ativo);
}

.wm-nav__item.is-ativo {
  background-color: var(--wm-sidebar-bg-hover);
  color: var(--wm-sidebar-texto-ativo);
  box-shadow: inset 3px 0 0 var(--wm-acento);
}

.wm-nav__icone {
  width: 1.15rem;
  text-align: center;
  flex: none;
  opacity: 0.85;
  font-size: 1.05rem;
  line-height: 1;
}

.wm-sidebar__rodape {
  padding: 0.9rem 1rem;
  border-top: 1px solid rgb(255 255 255 / 8%);
  color: #6b7488;
  font-size: 0.75rem;
}

/* ------------------------------------------------------------------ *
 * Topbar e conteudo
 * ------------------------------------------------------------------ */

.wm-conteudo {
  margin-left: var(--wm-sidebar-largura);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wm-topbar {
  height: var(--wm-topbar-altura);
  background: #fff;
  border-bottom: 1px solid var(--wm-borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.wm-topbar__titulo {
  font-weight: 650;
  font-size: 1.05rem;
  color: #2a303c;
}

.wm-topbar__acoes {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wm-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.wm-main {
  padding: 1.5rem;
  flex: 1;
}

.wm-container {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* ------------------------------------------------------------------ *
 * Cartoes e indicadores
 * ------------------------------------------------------------------ */

.wm-card {
  background: #fff;
  border: 1px solid var(--wm-borda);
  border-radius: var(--bulma-radius-large);
  padding: 1.25rem;
}

.wm-card__titulo {
  font-weight: 650;
  color: #2a303c;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wm-indicador__rotulo {
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wm-indicador__valor {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2430;
  line-height: 1.2;
  margin-top: 0.35rem;
}

.wm-indicador__nota {
  color: #6b7280;
  font-size: 0.82rem;
  margin-top: 0.25rem;
}

/* Cabecalho de pagina */
.wm-pagina-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.wm-pagina-cabecalho__titulo {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f2430;
}

.wm-pagina-cabecalho__sub {
  color: #6b7280;
  font-size: 0.9rem;
  margin-top: 0.15rem;
}

/* Estado vazio */
.wm-vazio {
  text-align: center;
  padding: 2.5rem 1rem;
  color: #6b7280;
}

.wm-vazio__icone {
  font-size: 2.25rem;
  opacity: 0.35;
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------ *
 * Tela de autenticacao
 * ------------------------------------------------------------------ */

.wm-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--wm-fundo);
}

.wm-auth__painel {
  display: none;
  color: #fff;
  padding: 3rem;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  isolation: isolate;

  /*
   * A foto e bem mais alta que larga, entao o corte fica ancorado embaixo:
   * e ali que estao a mesa e as cadeiras. O topo, so cortina e teto, e o que
   * sai quando o painel encurta.
   *
   * O gradiente por cima existe para o texto branco continuar legivel: mais
   * denso nas pontas, onde ficam a marca e a nota de rodape.
   */
  background-color: #1d232e;
  background-image:
    linear-gradient(
      180deg,
      rgb(23 28 38 / 55%) 0%,
      rgb(23 28 38 / 22%) 40%,
      rgb(23 28 38 / 45%) 80%,
      rgb(23 28 38 / 62%) 100%
    ),
    url("../images/login-background.jpg");
  background-position: center 60%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Sombra sob o texto: garante leitura mesmo nas areas claras da foto. */
.wm-auth__painel > * {
  text-shadow: 0 1px 3px rgb(0 0 0 / 45%);
}

.wm-auth__frase {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.35;
  max-width: 26rem;
}

.wm-auth__nota {
  color: #aeb7c6;
  font-size: 0.85rem;
}

.wm-auth__form {
  display: grid;
  place-items: center;
  padding: 2rem 1.5rem;
}

.wm-auth__caixa {
  width: 100%;
  max-width: 24rem;
}

@media screen and (min-width: 1024px) {
  .wm-auth {
    grid-template-columns: 1.1fr 1fr;
  }

  .wm-auth__painel {
    display: flex;
  }
}

/* ------------------------------------------------------------------ *
 * Zona das acoes destrutivas
 * ------------------------------------------------------------------ *
 * Remover fica afastado do conteudo e separado por um filete: alem de
 * respirar melhor, tira o botao do caminho de quem so queria salvar.
 */

.wm-zona-perigo {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--wm-borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.wm-zona-perigo__aviso {
  color: #6b7280;
  font-size: 0.82rem;
  max-width: 46rem;
}

/* ------------------------------------------------------------------ *
 * Campo de busca com sugestoes
 * ------------------------------------------------------------------ */

.wm-busca {
  position: relative;
}

.wm-busca__lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--wm-borda);
  border-radius: var(--bulma-radius);
  box-shadow: 0 8px 24px rgb(15 18 25 / 12%);
  max-height: 20rem;
  overflow-y: auto;
  z-index: 40;
}

.wm-busca__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.85rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-bottom: 1px solid #f2f4f7;
}

.wm-busca__item:last-child {
  border-bottom: 0;
}

.wm-busca__item:hover,
.wm-busca__item.is-destacado {
  background-color: #f4f7fa;
}

.wm-busca__item-titulo {
  font-weight: 600;
  color: #2a303c;
  font-size: 0.9rem;
}

.wm-busca__item-sub {
  color: #6b7280;
  font-size: 0.78rem;
  margin-top: 0.1rem;
}

.wm-busca__rodape {
  padding: 0.5rem 0.85rem;
  font-size: 0.75rem;
  color: #6b7280;
  background: #fafbfc;
  border-top: 1px solid var(--wm-borda);
}

.wm-busca__selecionado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid hsl(var(--bulma-primary-h) var(--bulma-primary-s) 75%);
  background: hsl(var(--bulma-primary-h) var(--bulma-primary-s) 97%);
  border-radius: var(--bulma-radius);
}

/* ------------------------------------------------------------------ *
 * Ajustes finos em componentes do Bulma
 * ------------------------------------------------------------------ */

.table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  border-bottom-width: 1px;
}

.table td {
  vertical-align: middle;
}

.wm-tabela-rolagem {
  overflow-x: auto;
}

.tag.is-rounded {
  font-weight: 600;
}

/* Menu lateral colapsado em telas estreitas */
@media screen and (max-width: 1023px) {
  .wm-sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .wm-sidebar.is-aberta {
    transform: translateX(0);
  }

  .wm-conteudo {
    margin-left: 0;
  }
}

.wm-overlay {
  position: fixed;
  inset: 0;
  background: rgb(15 18 25 / 45%);
  z-index: 25;
}