/* Timeline Styling */
.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: 0.75rem 0;
  position: relative;
}

.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 2.75rem;
  bottom: -0.75rem;
  width: 2px;
  background: var(--color-bs-gray-200);
}

.timeline-item.active::before {
  background: var(--color-success-bs);
}

.timeline-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  z-index: 1;
}

.timeline-content {
  flex: 1;
}

.timeline-title {
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.timeline-date {
  font-size: 0.8125rem;
  color: var(--color-bs-gray-500);
}

/* Status Badges */
.badge-status {
  padding: 0.375rem 0.75rem;
  border-radius: 50px;
  font-weight: 500;
  font-size: 0.75rem;
}

.badge-confirmed {
  background: rgba(25, 135, 84, 0.15);
  color: var(--color-success-bs);
}

.badge-pending {
  background: rgba(255, 193, 7, 0.15);
  color: var(--color-warning-bs-text);
}

.badge-cancelled {
  background: rgba(220, 53, 69, 0.15);
  color: var(--color-danger-bs);
}

/* Tables in cards */
.table-dashboard {
  margin-bottom: 0;
}

.table-dashboard thead th {
  border-bottom: 2px solid var(--color-neutral-150);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-bs-gray-500);
  padding: 0.75rem var(--spacing-sm);
}

.table-dashboard tbody td {
  padding: var(--spacing-sm);
  vertical-align: middle;
  border-bottom: 1px solid var(--color-bs-gray-100);
}

.table-dashboard tbody tr:last-child td {
  border-bottom: none;
}

.table-dashboard tbody tr:hover {
  background: var(--color-bs-gray-100);
}

.dashboard-table {
  font-size: 0.875rem;
}

.dashboard-table th {
  font-weight: 600;
  color: var(--color-bs-gray-500);
  border-top: none;
  padding: 0.75rem;
}

.dashboard-table td {
  padding: 0.75rem;
  vertical-align: middle;
}

.dashboard-table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* List items in cards */
.list-item-card {
  display: flex;
  align-items: center;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-neutral-150);
}

.list-item-card:last-child {
  border-bottom: none;
}

/* Icon circles */
.icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-circle-lg {
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
}

/* Chart Placeholder */
.chart-placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bs-gray-100);
  border-radius: var(--radius-md);
  color: var(--color-bs-gray-500);
}

/* Breadcrumb compartilhado (telas de detalhe/edicao).
   Links neutros, sem sublinhado azul padrao; item ativo esmaecido. */
.breadcrumb {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
}

.breadcrumb-item a {
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
  color: var(--color-gray-900);
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--color-gray-400);
}

/* ====================================================================
   Barra de acoes de formularios — PADRAO UNICO.
   Ordem (esquerda -> direita): [voltar/terciario] ... [secundario] [primario].
   - Sempre alinhada a direita; primario sempre por ultimo.
   - "voltar" (ou um 3o botao) vai para a extrema esquerda.
   - Respiro nas bordas (nunca colado no box).
   Uso: <div class="form-actions"> ...botoes... </div>
   O botao de voltar/terciario recebe a classe .form-actions-back.
   ==================================================================== */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: var(--spacing-sm) 1.25rem;
  border-top: 1px solid var(--color-neutral-150);
}

.form-actions .form-actions-back,
.form-actions .dashboard-back-btn,
.form-actions [data-admin-edit-step-prev],
.form-actions [data-admin-offer-prev],
.form-actions [data-offer-wizard-prev] {
  order: -1;
  margin-right: auto;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-gray-600);
}

.form-actions .form-actions-back:hover:not(:disabled),
.form-actions .dashboard-back-btn:hover:not(:disabled),
.form-actions [data-admin-edit-step-prev]:hover:not(:disabled),
.form-actions [data-admin-offer-prev]:hover:not(:disabled),
.form-actions [data-offer-wizard-prev]:hover:not(:disabled),
.form-actions .form-actions-back:focus-visible,
.form-actions .dashboard-back-btn:focus-visible,
.form-actions [data-admin-edit-step-prev]:focus-visible,
.form-actions [data-admin-offer-prev]:focus-visible,
.form-actions [data-offer-wizard-prev]:focus-visible {
  background: var(--color-neutral-100);
  border-color: transparent;
  color: var(--color-gray-900);
}

.form-actions [id*="Cancel"],
.form-actions [name*="Cancel"] {
  order: 10;
}

.admin-edit-step-actions > .ms-auto {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto !important;
}

.admin-edit-step-actions > .ms-auto [id*="Cancel"],
.admin-edit-step-actions > .ms-auto [name*="Cancel"] {
  order: 10;
}

.admin-edit-step-actions > .ms-auto [data-admin-edit-step-next],
.admin-edit-step-actions > .ms-auto [data-admin-edit-submit],
.admin-edit-step-actions > .ms-auto [data-admin-offer-next],
.admin-edit-step-actions > .ms-auto [data-offer-wizard-next],
.admin-edit-step-actions > .ms-auto [data-offer-wizard-submit],
.admin-edit-step-actions > .ms-auto [data-offer-submit-confirm] {
  order: 20;
}

/* Botoes com largura consistente na barra de acoes. */
.form-actions > .btn,
.admin-edit-step-actions > .ms-auto > .btn {
  min-width: 7.5rem;
}

/* Mobile: botoes ocupam a largura, mantendo a ordem (primario por ultimo). */
@media (max-width: 575.98px) {
  .form-actions {
    justify-content: stretch;
    padding: 0.875rem var(--spacing-sm);
  }

  .form-actions > .btn,
  .admin-edit-step-actions > .ms-auto > .btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .admin-edit-step-actions > .ms-auto {
    width: 100%;
    margin-left: 0 !important;
  }

  .form-actions .form-actions-back,
  .form-actions .dashboard-back-btn,
  .form-actions [data-admin-edit-step-prev],
  .form-actions [data-admin-offer-prev],
  .form-actions [data-offer-wizard-prev] {
    margin-right: 0;
  }
}

/* ====================================================================
   Campos de upload de arquivo/documento — PADRAO UNICO (todas as telas).
   Estiliza o input[type=file] do Bootstrap de forma consistente, sem
   precisar mexer em cada view. O botao "escolher arquivo" fica padronizado.
   ==================================================================== */
input[type="file"].form-control,
input[type="file"].form-control-sm {
  cursor: pointer;
  line-height: 1.5;
}

input[type="file"].form-control::file-selector-button,
input[type="file"].form-control-sm::file-selector-button {
  margin: -0.375rem 0.75rem -0.375rem -0.75rem;
  padding: var(--spacing-xs) 0.9rem;
  border: 0;
  border-right: 1px solid var(--color-gray-200);
  border-radius: 0;
  background: var(--color-surface-muted);
  color: var(--color-gray-700);
  font-weight: var(--form-label-font-weight, 500);
  font-size: var(--form-label-font-size, 0.95rem);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

input[type="file"].form-control:hover::file-selector-button,
input[type="file"].form-control-sm:hover::file-selector-button {
  background: var(--color-gray-200);
  color: var(--color-gray-900);
}

input[type="file"].form-control:focus::file-selector-button,
input[type="file"].form-control-sm:focus::file-selector-button {
  background: var(--color-gray-200);
}

/* Donut de distribuição do portfólio (dashboard) com SVG e classes de cor. */
.dash-donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.dash-donut {
  position: relative;
  width: 132px;
  height: 132px;
  flex: 0 0 auto;
}

.dash-donut__ring {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.dash-donut__track,
.dash-donut__segment {
  fill: none;
  stroke-width: 4;
}

.dash-donut__track {
  stroke: var(--color-gray-200);
}

.dash-donut__segment {
  stroke: var(--dash-sector-color, var(--primary));
}

.dash-sector-color--primary {
  --dash-sector-color: var(--primary);
}

.dash-sector-color--success {
  --dash-sector-color: var(--color-success-500);
}

.dash-sector-color--warning {
  --dash-sector-color: var(--color-warning-amber-500);
}

.dash-sector-color--danger {
  --dash-sector-color: var(--color-danger-500);
}

.dash-sector-color--info {
  --dash-sector-color: var(--color-cyan-500);
}

.dash-sector-color--secondary {
  --dash-sector-color: var(--color-slate-400);
}

.dash-donut__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  background: var(--color-white);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dash-donut__center-value {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.dash-donut__center-label {
  font-size: 0.55rem;
  line-height: 1.05;
  text-align: center;
  color: var(--color-gray-400);
}

.dash-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8125rem;
}

.dash-donut-legend__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dash-donut-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: var(--dash-sector-color, var(--primary));
}