/* ───────────────────────────────────────────────
   Analisa — Custom Styles
   Only for things Tailwind CSS classes CANNOT express:
   pseudo-elements, vendor prefixes, 3rd party overrides.
   ─────────────────────────────────────────────── */

/* ─── Background Pattern (pseudo-element) ──── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse 600px 400px at 20% 10%, rgba(16, 185, 129, 0.04), transparent),
    radial-gradient(ellipse 500px 350px at 80% 80%, rgba(6, 182, 212, 0.03), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ─── Custom Scrollbar (vendor) ────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #52525b; }

/* ─── Sticky Table Header ──────────────────── */
.sticky-header th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #18181b;
}

/* ─── Pulse Dot Animation ──────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* ─── Fade In Up Animation ─────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.5s ease forwards; }

/* ─── SweetAlert2 Overrides ────────────────── */
.swal2-popup { font-family: 'Inter', system-ui, sans-serif !important; }
.swal2-title { font-size: 1rem !important; }
.swal2-html-container { font-size: 0.875rem !important; }

/* ─── Selection Color ──────────────────────── */
::selection { background: rgba(16, 185, 129, 0.3); color: #fff; }

/* ─── Number Input Spinner Hide (vendor) ───── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ─── Corner Ribbon Badge ──────────────────── */
.ribbon {
  position: absolute;
  top: 10px;
  right: -30px;
  width: 100px;
  padding: 2px 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transform: rotate(45deg);
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.ribbon--1 { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.ribbon--2 { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.ribbon--3 { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }