/* ==========================================================
   organizacoes.css — Lista de organizações
   Exclusivo da página "Organizações".
   ========================================================== */

/* --- empty-state (a página não carrega _dashboard.css) ------ */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.empty-state__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}

.empty-state__desc {
  font-size: .875rem;
  color: var(--text-muted);
  max-width: 320px;
  margin: 0 auto;
}

/* --- Cabeçalho -------------------------------------------------- */
.page-organizacoes main header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-organizacoes header h1 {
  margin: 0;
}

/* --- Filtros ---------------------------------------------------- */
.page-organizacoes .filters {
  margin: 18px 0 22px;
}

.page-organizacoes .filters__row {
  display: grid;
  grid-template-columns: minmax(220px, 420px);
}

/* Botão primário dentro do .action (o _structure.css o estiliza como secundário) */
.page-organizacoes .action button.btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.page-organizacoes .action button.btn-primary:hover:not(:disabled):not([data-loading]) {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* --- Cards de organização --------------------------------------- */
.page-organizacoes .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.org-card {
  cursor: pointer;
}

.org-card__logo {
  width: 64px;
  height: 64px;
  margin: 20px auto 6px;
  border-radius: 100em;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-soft), var(--bg));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand);
}

.org-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.org-card__logo--initials {
  text-transform: uppercase;
}

.org-card__body {
  padding: 8px 20px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.org-card__body h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.org-card__company,
.org-card__cnpj {
  font-size: .8125rem;
  color: var(--text-muted);
  margin: 0;
}

.org-card__cnpj {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.org-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 20px 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.org-card__projects,
.org-card__participants {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.org-card__projects svg,
.org-card__participants svg {
  flex-shrink: 0;
}

.org-card__status {
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.org-card__status--ativa   { background: #dcfce7; color: #166534; }
.org-card__status--inativa { background: var(--danger-soft); color: var(--danger); }

/* --- Dialog: nova organização ----------------------------------- */
.page-organizacoes dialog {
  width: min(480px, 95vw);
}