/* =========================================================================
   app-ui.css
   Componentes de UI compartilhados entre páginas (toasts, modal de
   confirmação genérico, botões com spinner, dropzone de upload e cards
   de resumo). Carregado globalmente via header.php.
   ========================================================================= */

:root {
  /* Paleta pastel / SaaS clean, alinhada às variáveis de custom.scss.
     Tons suaves e de baixa saturação para os estados de feedback. */
  --app-danger: #d97a72;
  --app-danger-dark: #b8574c;
  --app-danger-soft: #faeae8;
  --app-success: #5fb896;
  --app-success-dark: #479c7d;
  --app-success-soft: #e6f4ef;
  --app-warning: #e3a855;
  --app-warning-dark: #b9822f;
  --app-warning-soft: #fbf0e2;
  --app-info: #8db8dd;
  --app-info-dark: #6d9dc7;
  --app-info-soft: #eaf2f9;

  --app-surface: #ffffff;
  --app-surface-muted: #f5f7f9;

  --app-radius-sm: 10px;
  --app-radius: 16px;
  --app-radius-lg: 22px;

  --app-shadow-sm: 0 1px 3px rgba(36, 48, 61, .05);
  --app-shadow-md: 0 8px 20px rgba(36, 48, 61, .06);
  --app-shadow-lg: 0 20px 40px rgba(36, 48, 61, .08);
}

/* ---------------------------------------------------------------------
   Toasts
   --------------------------------------------------------------------- */
.app-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1085;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
}

.app-toast {
  border: 1px solid var(--app-border, rgba(148, 163, 184, .25));
  border-left-width: 4px;
  border-radius: var(--app-radius-sm);
  box-shadow: var(--app-shadow-md);
  background: var(--app-surface);
  overflow: hidden;
}

.app-toast .toast-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
}

.app-toast__icon {
  margin-top: 2px;
  font-size: 16px;
  flex: 0 0 auto;
}

.app-toast__text {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.45;
  color: var(--app-text, #24303d);
  word-break: break-word;
}

.app-toast__close {
  flex: 0 0 auto;
  margin-top: 2px;
}

.app-toast--success { border-left-color: var(--app-success); }
.app-toast--success .app-toast__icon { color: var(--app-success); }
.app-toast--error { border-left-color: var(--app-danger); }
.app-toast--error .app-toast__icon { color: var(--app-danger); }
.app-toast--warning { border-left-color: var(--app-warning); }
.app-toast--warning .app-toast__icon { color: var(--app-warning-dark); }
.app-toast--info { border-left-color: var(--app-info); }
.app-toast--info .app-toast__icon { color: var(--app-info); }

@media (max-width: 575.98px) {
  .app-toast-container {
    top: auto;
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* ---------------------------------------------------------------------
   Estado inicial oculto (substitui style="display:none" inline).
   Sem !important para nao conflitar com jQuery .show()/.hide(), que
   define o display via estilo inline no proprio elemento.
   --------------------------------------------------------------------- */
.is-hidden-init {
  display: none;
}

/* ---------------------------------------------------------------------
   Botões com estado de carregamento (spinner + bloqueio de clique duplo)
   --------------------------------------------------------------------- */
.btn.is-loading {
  pointer-events: none;
  opacity: .85;
}

.btn.is-loading .spinner-border {
  vertical-align: -2px;
}

/* ---------------------------------------------------------------------
   Modal de confirmação (genérico e específicos "perigo")
   --------------------------------------------------------------------- */
.app-confirm-modal .modal-content,
.modal-danger-style .modal-content {
  border: none;
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-lg);
  overflow: hidden;
}

.app-confirm-modal .modal-header,
.modal-danger-style .modal-header {
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--app-border, rgba(148, 163, 184, .25));
  background: linear-gradient(180deg, rgba(217, 122, 114, .08), transparent);
}

.app-confirm-modal__icon,
.modal-danger-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--app-danger-soft);
  color: var(--app-danger-dark);
  font-size: 17px;
}

.app-confirm-modal .modal-title,
.modal-danger-style .modal-title {
  font-weight: 700;
  font-size: 15px;
}

.app-confirm-modal .modal-body,
.modal-danger-style .modal-body {
  font-size: 13px;
  color: var(--app-text, #24303d);
}

.app-confirm-modal .modal-footer,
.modal-danger-style .modal-footer {
  border-top: 1px solid var(--app-border, rgba(148, 163, 184, .25));
}

.app-feedback-modal .modal-content {
  border: none;
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-lg);
  overflow: hidden;
}

.app-feedback-modal .modal-header {
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--app-border, rgba(148, 163, 184, .25));
  background: linear-gradient(180deg, rgba(141, 184, 221, .08), transparent);
}

.app-feedback-modal .modal-footer {
  border-top: 1px solid var(--app-border, rgba(148, 163, 184, .25));
}

.app-feedback-modal__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--app-info-soft);
  color: var(--app-info-dark);
  font-size: 17px;
}

.app-feedback-modal .modal-title {
  font-weight: 700;
  font-size: 15px;
}

.app-feedback-modal .modal-body {
  font-size: 13px;
  color: var(--app-text, #24303d);
}

.app-feedback-modal.is-success .app-feedback-modal__icon {
  background: var(--app-success-soft);
  color: var(--app-success-dark);
}

.app-feedback-modal.is-warning .app-feedback-modal__icon {
  background: var(--app-warning-soft);
  color: var(--app-warning-dark);
}

.app-feedback-modal.is-danger .app-feedback-modal__icon,
.app-feedback-modal.is-error .app-feedback-modal__icon {
  background: var(--app-danger-soft);
  color: var(--app-danger-dark);
}

/* Overlay leve para o corpo do modal enquanto uma exclusão/ação está em
   andamento — desabilita interação visualmente sem remover elementos. */
.app-modal-busy .modal-body,
.app-modal-busy .modal-footer {
  position: relative;
}

.app-modal-busy .modal-content {
  pointer-events: none;
}

.app-modal-busy .btn-close {
  pointer-events: none;
  opacity: .4;
}

.app-busy-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--app-text, #24303d);
}

.app-busy-status .spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: .15em;
}

/* ---------------------------------------------------------------------
   Dropzone de upload (arrastar-e-soltar)
   --------------------------------------------------------------------- */
.app-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 28px 16px;
  border: 2px dashed var(--app-border, rgba(148, 163, 184, .4));
  border-radius: var(--app-radius);
  background: var(--app-surface-muted);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.app-dropzone:hover {
  border-color: var(--app-primary, #5fb896);
  background: var(--app-primary-soft, #e6f4ef);
}

.app-dropzone.is-dragover {
  border-color: var(--app-primary, #5fb896);
  background: var(--app-primary-soft, #e6f4ef);
}

.app-dropzone.has-file {
  border-style: solid;
  border-color: var(--app-success);
  background: var(--app-success-soft);
}

.app-dropzone__icon {
  font-size: 26px;
  color: var(--app-primary, #5fb896);
}

.app-dropzone.has-file .app-dropzone__icon {
  color: var(--app-success-dark);
}

.app-dropzone__title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--app-text, #24303d);
}

.app-dropzone__hint {
  font-size: 12px;
  color: var(--app-muted, #7a8a9a);
}

.app-dropzone__filename {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--app-success-dark);
  word-break: break-all;
}

/* ---------------------------------------------------------------------
   Cards de resumo (stat tiles) — usados no resumo de importação e em
   outros pequenos painéis de números.
   --------------------------------------------------------------------- */
.app-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.app-summary-tile {
  border: 1px solid var(--app-border, rgba(148, 163, 184, .25));
  border-radius: var(--app-radius-sm);
  padding: 12px 14px;
  background: var(--app-surface);
  text-align: center;
}

.app-summary-tile__value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--app-text, #24303d);
}

.app-summary-tile__label {
  margin-top: 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--app-muted, #7a8a9a);
  font-weight: 600;
}

.app-summary-tile--total .app-summary-tile__value { color: var(--app-text, #24303d); }
.app-summary-tile--success { border-color: rgba(95, 184, 150, .3); background: var(--app-success-soft); }
.app-summary-tile--success .app-summary-tile__value { color: var(--app-success-dark); }
.app-summary-tile--muted { border-color: rgba(148, 163, 184, .35); }
.app-summary-tile--muted .app-summary-tile__value { color: #475569; }