/*
 * style.css — Custom styles for WarmupIP Central Dashboard
 * Built on top of Tailwind CSS (CDN). Minimal additions only.
 */

/* ── Placement badges ──────────────────────────────────── */
.placement-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-inbox {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.badge-spam {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.badge-tabs {
  background-color: #fef9c3;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* ── Status indicators ────────────────────────────────── */
.status-active {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.status-inactive {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* ── Tables ───────────────────────────────────────────── */
table {
  border-collapse: collapse;
}

/* Zebra striping for long tables */
tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* ── Scrollbar thin (webkit) ──────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ── Transition smoothing ─────────────────────────────── */
a,
button {
  transition-property: color, background-color, border-color, opacity;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Code / monospace ─────────────────────────────────── */
code,
.font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ── Nav link active state (supplement Jinja2 logic) ──── */
.nav-link.active,
.nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #6366f1;
}

/* ── Card hover lift ──────────────────────────────────── */
.card-hover:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}