/* assets/css/style.css
   Lưu ý: Tailwind Play-CDN chỉ compile class viết trực tiếp trong HTML,
   nên các class lặp lại (input, button...) được viết bằng CSS thuần ở đây. */

.input-field {
  width: 100%;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #1e293b;
  outline: none;
  transition: box-shadow .15s, border-color .15s;
}
.input-field::placeholder { color: #94a3b8; }
.input-field:focus { box-shadow: 0 0 0 3px rgba(31,174,113,.35); border-color: transparent; }
.dark .input-field { background:#0f172a; border-color:#334155; color:#f1f5f9; }

.btn-primary {
  display: inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.625rem 1.25rem; border-radius:.75rem; font-weight:600;
  background:#1fae71; color:#fff; transition: background .15s;
}
.btn-primary:hover { background:#138c5a; }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }

.btn-secondary {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.625rem 1.25rem; border-radius:.75rem; font-weight:600;
  background:#f1f5f9; color:#334155; transition: background .15s;
}
.btn-secondary:hover { background:#e2e8f0; }
.dark .btn-secondary { background:#1e293b; color:#e2e8f0; }
.dark .btn-secondary:hover { background:#334155; }

.section-panel {
  background:#fff; border:1px solid #e2e8f0; border-radius:1rem;
}
.dark .section-panel { background:#0f172a; border-color:#1e293b; }

.badge { display:inline-flex; align-items:center; gap:.25rem; padding:.25rem .625rem; border-radius:9999px; font-size:.75rem; font-weight:500; }
.badge-pending { background:#fffbeb; color:#b45309; }
.badge-success { background:#ecfdf5; color:#047857; }
.badge-failed  { background:#fef2f2; color:#b91c1c; }
.dark .badge-pending { background:rgba(180,83,9,.15); color:#fcd34d; }
.dark .badge-success { background:rgba(4,120,87,.15); color:#6ee7b7; }
.dark .badge-failed  { background:rgba(185,28,28,.15); color:#fca5a5; }

.copy-flash { animation: flash-bg .6s ease; }
@keyframes flash-bg {
  0% { background-color: rgba(31,174,113,.25); }
  100% { background-color: transparent; }
}

/* ============================================================
   TOAST — thông báo nổi (dùng khi webhook SePay báo cộng tiền)
   ============================================================ */
.app-toast {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #1fae71;
  border-radius: .75rem;
  padding: .875rem 1.1rem;
  font-size: .875rem;
  font-weight: 500;
  color: #1e293b;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.1);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .25s ease, transform .25s ease;
}
.app-toast.show { opacity: 1; transform: translateY(0); }
.app-toast-success { border-left-color: #1fae71; }
.app-toast-success i { color: #1fae71; flex-shrink: 0; }
.app-toast-error { border-left-color: #dc2626; }
.app-toast-error i { color: #dc2626; flex-shrink: 0; }

.dark .app-toast { background:#0f172a; border-color:#1e293b; color:#f1f5f9; }