/* ============================================================
   Condoria — Camada de componentes (Design System)
   Fonte única da verdade das classes de UI. Ver docs/design-system.md.
   CSS puro (sem @apply): o Tailwind é via CDN, sem build step.
   ============================================================ */

/* ---------- Botões: base ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;            /* py-2.5 px-4 */
  font-size: 0.875rem;               /* text-sm */
  line-height: 1.25rem;
  font-weight: 600;                  /* font-semibold */
  border-radius: 0.75rem;            /* rounded-xl */
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.btn:focus { outline: 2px solid transparent; outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 767px) {
  .btn { padding-left: 0.75rem; padding-right: 0.75rem; }  /* max-md:px-3 */
}

/* Modificadores de tamanho/largura */
.btn--wide { padding-left: 1.5rem; padding-right: 1.5rem; }  /* px-6 (submit) */
.btn--block { width: 100%; }
.btn--lg {                                                   /* CTAs de marketing (landing) */
  padding: 0.875rem 1.75rem;         /* py-3.5 px-7 */
  font-size: 1rem;                   /* text-base */
  line-height: 1.5rem;
  border-radius: 0.75rem;
}

/* ---------- Botões: variantes de cor ---------- */
.btn-primary {
  color: #fff;
  background-image: linear-gradient(to right, #ef4444, #e11d48); /* red-500 -> rose-600 */
  box-shadow: 0 1px 2px 0 rgba(239, 68, 68, 0.2);               /* shadow-sm shadow-red-500/20 */
}
.btn-primary:hover { background-image: linear-gradient(to right, #dc2626, #be123c); }
.btn-primary:focus-visible { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2); }

.btn-secondary {
  color: #4b5563;                    /* gray-600 */
  background-color: #f9fafb;         /* gray-50 */
  border-color: #e5e7eb;             /* gray-200 */
  font-weight: 500;                  /* font-medium */
}
.btn-secondary:hover { background-color: #f3f4f6; color: #374151; }

.btn-success { color: #fff; background-color: #16a34a; }        /* green-600 */
.btn-success:hover { background-color: #15803d; }
.btn-success:focus-visible { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2); }

.btn-info { color: #fff; background-color: #2563eb; }           /* blue-600 */
.btn-info:hover { background-color: #1d4ed8; }
.btn-info:focus-visible { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); }

.btn-warning { color: #fff; background-color: #f97316; }        /* orange-500 */
.btn-warning:hover { background-color: #ea580c; }

/* ---------- Botão de ícone quadrado (refresh) ---------- */
/* Unifica o conflito histórico: py-2.5 px-4 vs p-2.5 -> sempre p-2.5 */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;                 /* p-2.5 */
  color: #6b7280;                    /* gray-500 */
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}
.btn-icon:hover { background-color: #f3f4f6; color: #374151; }

/* ---------- Ícones de ação em linha de tabela ---------- */
.btn-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;                   /* p-2 */
  border-radius: 0.5rem;             /* rounded-lg */
  color: #9ca3af;                    /* gray-400 */
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-icon-action--sm { padding: 0.375rem; color: #d1d5db; }   /* p-1.5, gray-300 (kanban) */

.btn-icon-action.is-view:hover    { color: #2563eb; background-color: #eff6ff; }   /* blue */
.btn-icon-action.is-edit:hover    { color: #2563eb; background-color: #eff6ff; }
.btn-icon-action.is-delete:hover  { color: #dc2626; background-color: #fef2f2; }   /* red */
.btn-icon-action.is-success:hover { color: #059669; background-color: #ecfdf5; }   /* emerald */
.btn-icon-action.is-warning:hover { color: #d97706; background-color: #fffbeb; }   /* amber */

/* ---------- Fechar modal (X) ---------- */
/* Unifica 6+ variantes anteriores */
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;                    /* w-9 */
  height: 2.25rem;                   /* h-9 */
  border-radius: 0.5rem;             /* rounded-lg */
  color: #9ca3af;                    /* gray-400 */
  background-color: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-close:hover { background-color: #f3f4f6; color: #4b5563; }

/* ---------- Link de ação / estado-vazio ---------- */
.btn-link {
  color: #ef4444;                    /* red-500 */
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.btn-link:hover { color: #dc2626; text-decoration: underline; }

/* ---------- Remover arquivo/foto (X pequeno) ---------- */
.btn-remove {
  padding: 0.25rem;                  /* p-1 */
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.btn-remove:hover { color: #ef4444; }

/* ---------- Chip de filtro ---------- */
.filter-chip {
  padding: 0.5rem 0.75rem;           /* py-2 px-3 */
  border-radius: 0.75rem;            /* rounded-xl */
  font-size: 0.75rem;                /* text-xs */
  line-height: 1rem;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-chip:hover { background-color: #f9fafb; }
.filter-chip.active-filter {
  color: #fff;
  background-image: linear-gradient(to right, #ef4444, #e11d48);
  border-color: transparent;
}

/* ---------- Botão "adicionar item" tracejado ---------- */
.btn-dashed {
  border-style: dashed;
  border-color: #e5e7eb;
}
.btn-dashed:hover { border-color: #d1d5db; }

/* ---------- Inputs ---------- */
.input-field {
  width: 100%;
  background-color: #f9fafb;         /* gray-50 */
  border: 1px solid #e5e7eb;         /* gray-200 */
  border-radius: 0.75rem;            /* rounded-xl */
  padding: 0.75rem 1rem;             /* py-3 px-4 */
  font-size: 0.875rem;
  color: #111827;
  transition: all 0.15s ease;
}
.input-field::placeholder { color: #9ca3af; }
.input-field:focus {
  outline: none;
  background-color: #fff;
  border-color: #f87171;             /* red-400 */
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}
.input-field--info:focus {
  border-color: #60a5fa;             /* blue-400 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.input-search {
  width: 100%;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem 0.5rem 2.5rem; /* py-2 pl-10 pr-4 */
  font-size: 0.875rem;
  color: #111827;
  transition: all 0.15s ease;
}
.input-search::placeholder { color: #9ca3af; }
.input-search:focus {
  outline: none;
  border-color: #f87171;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}
@media (min-width: 640px) {
  .input-search { padding-top: 0.625rem; padding-bottom: 0.625rem; } /* sm:py-2.5 */
}

.input-sm {
  width: 100%;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;             /* rounded-lg */
  padding: 0.5rem 0.75rem;           /* py-2 px-3 */
  font-size: 0.875rem;
  color: #111827;
  transition: all 0.15s ease;
}
.input-sm::placeholder { color: #9ca3af; }
.input-sm:focus {
  outline: none;
  border-color: #f87171;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;          /* py-0.5 px-2 */
  border-radius: 9999px;             /* rounded-full */
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
.badge-success { background-color: #ecfdf5; color: #047857; }
.badge-danger  { background-color: #fef2f2; color: #b91c1c; }
.badge-info    { background-color: #eff6ff; color: #1d4ed8; }
.badge-neutral { background-color: #f3f4f6; color: #4b5563; }

/* ---------- Cards / skeleton (definição única compartilhada) ---------- */
.stat-card { transition: all 0.3s ease; min-width: 0; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1); }

.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }