/* ─── Typography ───────────────────────────────────────────────── */
body {
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
}


/* ─── Status dots ───────────────────────────────────────────────── */
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-up      { background-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.status-down    { background-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.status-pending { background-color: #d1cfc9; }

.pulse-dot {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}


/* ─── Nav link ──────────────────────────────────────────────────── */
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.4,0,0.2,1), color 150ms;
}
.nav-link:hover  { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); }
.nav-link.active { background-color: rgba(255,255,255,0.11); color: #fff; }
.nav-link svg    { opacity: 0.6; transition: opacity 150ms; }
.nav-link:hover svg, .nav-link.active svg { opacity: 1; }


/* ─── Stat card ─────────────────────────────────────────────────── */
.stat-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
}


/* ─── Status badge ──────────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ─── Buttons ───────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #c44436;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover {
  background-color: #b83c30;
  box-shadow: 0 3px 8px rgba(180,56,44,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #fff;
  color: #44423d;
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-secondary:hover {
  background-color: #f6f5f3;
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #fff;
  color: #c0392b;
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid rgba(192,57,43,0.25);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-danger:hover {
  background-color: #fdf3f2;
  border-color: rgba(192,57,43,0.4);
}


/* ─── White cards (global lift) ─────────────────────────────────── */
.bg-white.rounded-xl,
.bg-white.rounded-2xl {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08) !important;
}


/* ─── Inputs ────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="url"],
textarea,
select {
  transition: box-shadow 150ms cubic-bezier(0.4,0,0.2,1), border-color 150ms;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(196,68,54,0.15);
  border-color: rgba(196,68,54,0.5) !important;
}