/**
 * Ezer ERP - Base de CSS estruturada
 * Usada em todo o projeto. Não usar estilos inline; preferir estas classes.
 * Alinhado ao layout do Ezer CRM.
 */

/* ========== Layout de página ========== */
.erp-page {
  min-height: 100vh;
  background-color: rgb(250 250 250);
  display: flex;
  flex-direction: column;
}

.erp-main {
  flex: 1 1 0%;
  padding-top: 5rem;
  padding-bottom: 3rem;
}

.erp-container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.erp-page-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .erp-page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.erp-page-header__actions {
  flex-shrink: 0;
}

/* ========== Estados (loading, empty) ========== */
.erp-loading-state,
.erp-empty-state {
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: rgb(115 115 115);
  font-size: 0.875rem;
}

.erp-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.erp-loading-state.is-hidden,
.erp-loading-state.hidden,
.erp-empty-state.is-hidden {
  display: none !important;
}

/* ========== Tabelas ========== */
.erp-table-wrap {
  overflow-x: auto;
}

.erp-table-wrap.is-hidden {
  display: none !important;
}

.erp-table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.erp-table th {
  text-align: left;
  padding: 0.75rem 0.5rem;
  font-weight: 500;
  color: rgb(64 64 64);
  border-bottom: 1px solid rgb(229 229 229);
}

.erp-table th.text-right {
  text-align: right;
}

.erp-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid rgb(245 245 245);
  color: rgb(82 82 82);
}

.erp-table td.text-right {
  text-align: right;
}

.erp-table tbody tr:hover {
  background-color: rgb(250 250 250);
}

.erp-table .erp-table__cell--title {
  font-weight: 500;
  color: rgb(23 23 23);
}

/* ========== Badges de status ========== */
.erp-badge {
  font-size: 0.75rem;
  font-weight: 500;
}

.erp-badge--success {
  color: rgb(22 163 74);
}

.erp-badge--muted {
  color: rgb(163 163 163);
}

/* ========== Tags de status (financeiro e demais listas) ========== */
.erp-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 9999px;
  white-space: nowrap;
}

/* Pendente / Rascunho – âmbar suave */
.erp-tag--pendente,
.erp-tag--rascunho {
  background-color: rgb(254 243 199);
  color: rgb(146 64 14);
}

/* Pago / Recebido / Paga – verde suave */
.erp-tag--pago,
.erp-tag--recebido,
.erp-tag--paga {
  background-color: rgb(220 252 231);
  color: rgb(22 101 52);
}

/* Emitida – azul suave */
.erp-tag--emitida {
  background-color: rgb(219 234 254);
  color: rgb(30 64 175);
}

/* Cancelado / Cancelada – cinza suave */
.erp-tag--cancelado,
.erp-tag--cancelada {
  background-color: rgb(243 244 246);
  color: rgb(75 85 99);
}

/* ========== Botões de ação em linha (ícones minimalistas) ========== */
.erp-actions-cell {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
}

.erp-btn-link {
  background: none;
  border: none;
  padding: 0.35rem;
  font-size: 0;
  line-height: 0;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.erp-btn-link .erp-icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.erp-btn-link--primary {
  color: rgb(98 125 152);
}

.erp-btn-link--primary:hover {
  color: rgb(72 101 129);
  background-color: rgb(240 244 248);
}

.erp-btn-link--danger {
  color: rgb(248 113 113);
}

.erp-btn-link--danger:hover {
  color: rgb(225 29 72);
  background-color: rgb(254 243 242);
}

.erp-btn-link--default {
  color: rgb(82 82 82);
}

.erp-btn-link--default:hover {
  color: rgb(38 38 38);
  background-color: rgb(245 245 245);
}

/* Botão com texto (ex.: Emitir NFS-e) – restaura tamanho da fonte */
.erp-btn-link--text {
  font-size: 0.8125rem;
  line-height: 1.25;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.erp-btn-link--success {
  color: rgb(134 239 172);
}

.erp-btn-link--success:hover {
  color: rgb(34 197 94);
  background-color: rgb(240 253 244);
}

/* ========== Modal de visualização (dados somente leitura) ========== */
.erp-detail-view {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.erp-detail-view__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.erp-detail-view__section .erp-form-section__title {
  margin-bottom: 0;
}

.erp-detail-view__row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0.75rem 1rem;
  align-items: start;
  font-size: 0.875rem;
}

.erp-detail-view__label {
  font-weight: 500;
  color: rgb(115 115 115);
}

.erp-detail-view__value {
  color: rgb(36 36 36);
}

.erp-detail-view__value--empty {
  color: rgb(163 163 163);
  font-style: italic;
}

@media (min-width: 480px) {
  .erp-detail-view__row {
    grid-template-columns: 11rem 1fr;
  }
}

/* ========== Modais ========== */
.erp-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
}

.erp-modal.is-hidden,
.erp-modal.hidden {
  display: none !important;
}

.erp-modal__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s;
}

.erp-modal__inner {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.erp-modal__panel {
  position: relative;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  width: 80vw;
  max-width: 80vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
}

.erp-modal__panel--md,
.erp-modal__panel--lg {
  max-width: 80vw;
  width: 80vw;
}

.erp-modal__panel--sm {
  width: 100%;
  max-width: 28rem;
}

/* ========== Notificações (toast) – padrão do sistema ========== */
.erp-toast-wrap {
  position: fixed;
  top: 6rem;
  right: 1.5rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.erp-toast {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background-color: rgb(72 101 129);
  border: 1px solid rgb(51 78 104);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}

.erp-toast--success {
  background-color: rgb(72 101 129);
  border-color: rgb(51 78 104);
}

.erp-toast--error {
  background-color: rgb(190 18 60);
  border-color: rgb(159 8 48);
}

.erp-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgb(217 226 236);
  background-color: rgb(240 244 248);
  margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  padding: 1.25rem 1.5rem;
}

.erp-modal__title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: rgb(36 59 83);
}

.erp-modal__body {
  padding: 0;
}

/* Formulário dentro do modal: seções e campos */
.erp-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.erp-form-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.erp-form-section__title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(115 115 115);
  margin-bottom: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(245 245 245);
}

.erp-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.erp-form-field label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(64 64 64);
}

.erp-form-field .input-field {
  width: 100%;
}

.erp-input-uf {
  max-width: 5rem;
}

.erp-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1rem;
}

@media (min-width: 480px) {
  .erp-form-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.erp-form-grid--2 .erp-form-field--full {
  grid-column: 1 / -1;
}

.erp-form-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.erp-form-field--inline label {
  margin-bottom: 0;
  order: 2;
}

.erp-modal__footer {
  display: flex;
  gap: 0.75rem;
  padding-top: 1.25rem;
  margin-top: 0.25rem;
  border-top: 1px solid rgb(245 245 245);
  flex-wrap: wrap;
}

.erp-modal__footer .btn-primary,
.erp-modal__footer .btn-secondary,
.erp-modal__footer button {
  flex: 0 0 auto;
  width: auto;
}

/* ========== Card de conteúdo (compatível com .card do Tailwind) ========== */
.erp-card {
  border-radius: 0.75rem;
  border: 1px solid rgb(245 245 245);
  background-color: #fff;
  padding: 1.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s;
}

.erp-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* ========== Formulários dentro de modal ========== */
.erp-form-group {
  margin-bottom: 1rem;
}

.erp-form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(64 64 64);
  margin-bottom: 0.25rem;
}

.erp-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .erp-form-row--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.erp-form-row .erp-form-group--span-2 {
  grid-column: span 2;
}

/* ========== Componente padrão: anexo de arquivos (reutilizável) ==========
 * Uso: envolver em .erp-file-attach, opcional .erp-file-attach--single
 * data-accept, data-max-size (bytes), data-multiple ("true"/"false")
 * Lista de anexos com opção de remover. Fácil manutenção.
 * ========== */
.erp-file-attach {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.erp-file-attach__dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
  padding: 1rem 1.25rem;
  border: 2px dashed rgb(203 213 225);
  border-radius: 0.75rem;
  background-color: rgb(248 250 252);
  transition: border-color 0.2s, background-color 0.2s;
  cursor: pointer;
}

.erp-file-attach__dropzone:hover,
.erp-file-attach__dropzone.erp-file-attach__dropzone--focus {
  border-color: rgb(72 101 129);
  background-color: rgb(241 245 249);
}

.erp-file-attach__dropzone .erp-file-attach__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.erp-file-attach__dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  pointer-events: none;
  text-align: center;
}

.erp-file-attach__dropzone-icon {
  width: 2.25rem;
  height: 2.25rem;
  color: rgb(148 163 184);
  flex-shrink: 0;
}

.erp-file-attach__dropzone:hover .erp-file-attach__dropzone-icon,
.erp-file-attach__dropzone.erp-file-attach__dropzone--focus .erp-file-attach__dropzone-icon {
  color: rgb(72 101 129);
}

.erp-file-attach__dropzone-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(71 85 105);
}

.erp-file-attach__dropzone-hint {
  font-size: 0.75rem;
  color: rgb(148 163 184);
}

.erp-file-attach__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.erp-file-attach__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-file-attach__item:hover {
  border-color: rgb(203 213 225);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.erp-file-attach__item-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: rgb(100 116 139);
  flex-shrink: 0;
}

.erp-file-attach__item--uploaded .erp-file-attach__item-icon {
  color: rgb(22 163 74);
}

.erp-file-attach__item-name {
  flex: 1 1 auto;
  min-width: 0;
  color: rgb(30 41 59);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.erp-file-attach__item-size {
  flex-shrink: 0;
  color: rgb(148 163 184);
  font-size: 0.75rem;
}

.erp-file-attach__item-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: rgb(100 116 139);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}

.erp-file-attach__item-remove:hover {
  color: rgb(225 29 72);
  background-color: rgb(254 243 242);
}

.erp-file-attach__item-remove svg {
  width: 1rem;
  height: 1rem;
}

.erp-file-attach__empty {
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  color: rgb(148 163 184);
}

.erp-file-attach--single .erp-file-attach__list {
  max-height: 6rem;
  overflow: auto;
}