/* Definição das colunas específicas desta página */
/* 3 Colunas: UG (flexível), Data (fixa/média), Protocolo (fixa/média) */
.contas-grid .grid-header,
.contas-grid .grid-row {
  grid-template-columns: 2fr 1fr 1fr;
}

/* Ajuste dos inputs dentro do header do grid */
.contas-grid .grid-header > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding-bottom: 12px;
}

/* Estilo do input de filtro */
input.col-filter {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #e6eef7;
  background: #fff;
  font-size: 12px;
  color: #0f1724;
  outline: none;
  transition: border-color 0.2s;
}

input.col-filter:focus {
  border-color: #0b5ed7;
  box-shadow: 0 0 0 2px rgba(11, 94, 215, 0.1);
}

/* Classes utilitárias */
.font-bold {
  font-weight: 700;
}

/* Link sem estilo (herda do pai) */
.no-style-link {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  display: block; /* Ocupa a célula toda */
  width: 100%;
}

.no-style-link:hover {
  color: #0b5ed7 !important; /* Destaque sutil no hover */
}

/* Legenda */
.legend {
  background: #fff;
  border: 1px solid #eef3fb;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.04);
  margin: 12px 0;
  min-height: 20px; /* Garante altura se vazio */
}

/* Ícones de status */
.status-icon, .legend-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.status-tempestivo { background: #28a745; }
.status-intempestivo { background: #f0ad4e; }
.status-unknown { background: #9ca3af; }

.status-text, .legend-label {
  vertical-align: middle;
  font-weight: 600;
  font-size: 13px;
  color: #0f1724;
}

.contas-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.contas-search-header .section-title {
  margin: 0;
}

.contas-public-link {
  margin-left: auto;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.contas-public-link svg {
  flex-shrink: 0;
}


/* Responsividade Mobile */
@media (max-width: 768px) {
  /* No mobile, as colunas viram blocos empilhados */
  .contas-grid .grid-header {
    display: none; /* Esconde filtros no mobile por enquanto, ou adaptar para outro lugar */
  }

  .contas-grid .grid-row {
    grid-template-columns: 1fr; /* 1 Coluna */
    gap: 8px;
    padding: 12px;
  }

  .contas-grid .grid-row > div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
  }

  /* Cria o label usando o atributo data-label */
  .contas-grid .grid-row > div::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6b7280;
    font-size: 12px;
    margin-right: 12px;
  }
}