/* ===================================
   UI REFRESH — repaginação visual
   Aditivo: reusa tokens definidos em style.css.
   Ver: docs/repaginacao-ux-plan.md
   =================================== */


/* ===================================
   1. CARDS — refinamento global
   =================================== */

.card {
  border: none !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.card-header,
.card-footer {
  background-color: transparent !important;
  border: none !important;
  padding: .85rem 1.1rem;
}

.card-header {
  box-shadow: inset 0 -1px 0 var(--border-color);
  font-weight: 600;
}

.card-footer {
  box-shadow: inset 0 1px 0 var(--border-color);
}

/* Padding generoso opcional para painéis principais */
.card-cozy > .card-body,
.card.card-cozy > .card-body {
  padding: 1.5rem;
}

/* Lift só em cards clicáveis (opt-in) */
.card.is-clickable,
.card[role="button"],
a.card,
.card-link-wrapper {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card.is-clickable:hover,
.card[role="button"]:hover,
a.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}


/* ===================================
   2. TABELAS — estilo clean
   =================================== */

.table {
  --bs-table-cell-padding-y: .75rem;
  --bs-table-cell-padding-x: 1rem;
  margin-bottom: 0;
}

/* Remove bordas verticais (só mantém horizontais) */
.table > :not(caption) > * > * {
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom-color: var(--border-color);
}

/* Cabeçalho sem fundo pesado, com linha mais firme abaixo */
.table > thead > tr > th {
  background-color: transparent !important;
  border-top: 0 !important;
  border-bottom: 2px solid var(--border-color) !important;
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
}

/* Última linha sem borda inferior (encosta no card-footer) */
.table > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

/* Hover de linha consistente com a paleta */
.table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: color-mix(in srgb, var(--link) 7%, transparent);
  color: var(--text-main);
}

/* Densidade em mobile */
@media (max-width: 767.98px) {
  .table {
    --bs-table-cell-padding-y: .5rem;
    --bs-table-cell-padding-x: .65rem;
  }
}

/* Coluna numérica */
.col-num,
td.col-num,
th.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ===================================
   3. BADGES SOFT — reutilizando --surface-*
   =================================== */

.badge.badge-soft-success,
.badge.badge-soft-warning,
.badge.badge-soft-danger,
.badge.badge-soft-info,
.badge.badge-soft-primary,
.badge.badge-soft-secondary {
  font-weight: 600;
  padding: .35em .7em;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .3em;
}

.badge.badge-soft-success {
  background: var(--surface-success);
  color: var(--color-success);
}
.badge.badge-soft-warning {
  background: var(--surface-warning);
  color: color-mix(in srgb, var(--color-warning) 60%, #6b4900);
}
.badge.badge-soft-danger {
  background: var(--surface-danger);
  color: var(--color-danger);
}
.badge.badge-soft-info {
  background: var(--surface-info);
  color: color-mix(in srgb, var(--color-info) 60%, #055160);
}
.badge.badge-soft-secondary {
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  color: var(--text-muted);
}
.badge.badge-soft-primary {
  background: color-mix(in srgb, var(--link) 14%, transparent);
  color: var(--link);
}

/* No dark, os tons de texto precisam ser mais claros */
:root[data-theme="dark"] .badge.badge-soft-warning {
  color: color-mix(in srgb, var(--color-warning) 80%, #fff);
}
:root[data-theme="dark"] .badge.badge-soft-info {
  color: color-mix(in srgb, var(--color-info) 75%, #fff);
}


/* ===================================
   4. BOTÕES — refinamentos
   =================================== */

:root {
  --bs-btn-border-radius: var(--radius-md);
}

.btn {
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .12s ease;
}

.btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  box-shadow: none;
}

/* Botão de ícone (substitui btn-danger gigante em listagens) */
.btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
}
.btn-icon:hover {
  background: color-mix(in srgb, var(--link) 10%, transparent);
  color: var(--link);
}
.btn-icon.btn-icon-danger:hover {
  background: var(--surface-danger);
  color: var(--color-danger);
}

/* Loading: troca conteúdo por spinner (controlado via JS) */
.btn[data-loading="true"] {
  pointer-events: none;
  opacity: .85;
  position: relative;
}
.btn[data-loading="true"] .btn-label {
  visibility: hidden;
}
.btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -.5em 0 0 -.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .65s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }


/* ===================================
   6. SIDEBAR ACTIVE STATE (barra lateral)
   =================================== */

.app-menu a.active,
.sidebar-menu a.active {
  box-shadow: inset 3px 0 0 var(--link);
  background-color: color-mix(in srgb, var(--link) 10%, transparent);
  color: var(--link);
}


/* ===================================
   7. MODAL — variante danger soft
   (header neutro, só ícone + ação coloridos)
   =================================== */

.modal-content.is-danger-soft .modal-header {
  background: var(--bg-elevated) !important;
  box-shadow: inset 0 -1px 0 var(--border-color);
}
.modal-content.is-danger-soft .modal-title,
.modal-content.is-danger-soft .modal-title i {
  color: var(--color-danger);
}


/* ===================================
   8. TIPOGRAFIA — fonte system moderna
   =================================== */

body, .app-root {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-size: .9375rem; /* 15px — densidade levemente maior em telas administrativas */
}


/* ===================================
   9. FORMULÁRIOS — inputs, labels, focus
   =================================== */

.form-control,
.form-select {
  border-radius: var(--radius-md);
  border-color: var(--border-color);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
  border-color: color-mix(in srgb, var(--link) 35%, var(--border-color));
}

.form-control:focus,
.form-select:focus {
  border-color: var(--link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 18%, transparent);
}

.form-label {
  font-weight: 500;
  font-size: .875rem;
  color: var(--text-main);
  margin-bottom: .35rem;
}

/* Estado de erro mais sutil: borda + glow leve, sem fundo vermelho pesado */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: var(--color-danger);
  background-image: none;
  padding-right: .75rem;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 22%, transparent);
}
.invalid-feedback {
  font-size: .8125rem;
  color: var(--color-danger);
}

/* Input-group: cantos alinhados ao radius novo */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text,
.input-group > .btn {
  border-radius: var(--radius-md);
}
.input-group > :not(:first-child):not(.dropdown-menu) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-text {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-muted);
}


/* ===================================
   10. BREADCRUMB + CABEÇALHO DE PÁGINA
   =================================== */

.breadcrumb {
  --bs-breadcrumb-divider: "›";
  font-size: .8125rem;
  margin-bottom: .5rem;
  padding: 0;
  background: transparent;
}
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .12s ease;
}
.breadcrumb-item a:hover {
  color: var(--link);
}
.breadcrumb-item.active {
  color: var(--text-main);
  font-weight: 500;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--border-color);
  padding: 0 .5rem;
}

/* Título de página: h2 + subtítulo padronizado */
h1.page-title,
h2.page-title,
.page-header h2 {
  font-weight: 700;
  letter-spacing: -.01em;
}
.page-header {
  margin-bottom: 1.25rem;
}
.page-header .page-subtitle {
  color: var(--text-muted);
  font-size: .9rem;
  margin-top: .15rem;
}


/* ===================================
   11. STAT-CARDS / ACTION-CARDS — polimento
   (não duplicar regras de style.css; só refinar)
   =================================== */

.stat-card .stat-label {
  color: var(--text-muted);
  font-size: .7rem;
}
.stat-card h3 {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.action-card {
  position: relative;
  overflow: hidden;
}
.action-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--link) 12%, transparent) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.action-card:hover::after {
  opacity: 1;
}
.action-card .card-footer.action-card-footer i {
  transition: transform .18s ease;
}
.action-card:hover .card-footer.action-card-footer i {
  transform: translateX(3px);
}


/* ===================================
   12. BOTÕES — elevação e estados de pressão
   =================================== */

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, currentColor 18%, transparent);
  transform: translateY(-1px);
}
.btn-primary:active,
.btn-success:active,
.btn-danger:active,
.btn-warning:active,
.btn-info:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* Botão outline: hover preenche levemente em vez de virar cor sólida */
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}