/* === LAYOUT GERAL === */
@media (min-width: 1024px) {
  .main-content {
    margin-left: 240px;
  }
  .dashboard-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .dashboard-cards .column {
    flex: 1;
    min-width: 200px;
  }
}

@media (max-width: 1023px) {
  .main-content {
    margin-left: 0 !important;
  }
  .dashboard-cards {
    display: block;
  }
  .dashboard-cards .column {
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* === SIDEBAR DESKTOP === */
.menu-lateral {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 220px;
  background: #0a2c61;
  padding: 1rem;
  overflow-y: auto;
  color: white;
  z-index: 10;
}

.menu-list a {
  color: #ffffff;
}

.menu-list a.is-active {
  color: #0a2c61 !important;
  background-color: #ffffff;
  font-weight: bold;
}

/* === MENU MOBILE (BAR + DROPDOWN) === */
/* Aplica o azul principal em toda a navbar e dropdown */
.navbar,
.navbar.is-primary,
.navbar-menu,
.navbar-start {
  background-color: #0a2c61 !important;
}

/* Faz os tracinhos do burger ficarem brancos */
.navbar-burger span {
  background-color: white !important;
}

/* Link do dropdown mobile sempre branco */
.navbar-menu .navbar-item {
  color: #ffffff !important;
}

/* Destaque do item ativo (fundo branco + texto azul) */
.navbar-menu .navbar-item.is-active {
  background-color: #ffffff !important;
  color: #0a2c61 !important;
  font-weight: bold;
}
/* === TABELA RESPONSIVA PARA MOBILE === */
@media (max-width: 768px) {
  /* Esconde o thead inteiro */
  table.responsive thead {
    display: none;
  }

  /* Faz a tabela, tbody e tr (linhas) ficarem blocos */
  table.responsive,
  table.responsive tbody,
  table.responsive tr {
    display: block;
    width: 100%;
  }

  /* Cada linha (tr) deve ter um espaçamento inferior */
  table.responsive tr {
    margin-bottom: 1rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5rem;
  }

  /* Cada célula (td) vira um bloco que ocupa 100% */
  table.responsive td {
    display: block;
    width: 100%;
    padding: 0.3rem 0.5rem;
    text-align: right; /* Valor alinhado à direita, rótulo à esquerda */
    position: relative;
  }

  /* Antes do conteúdo de cada td, mostramos o data-label */
  table.responsive td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.5rem;
    width: 45%;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
  }

  /* Ajusta o input e botão para caber melhor */
  table.responsive input.is-small,
  table.responsive .button.is-small {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
  }
}